我创建了一个页脚并将其放在 app.jsx 文件中以显示在每个页面上。但是，如果页面上的内容没有占据整个页面，页脚就会浮起来。我需要更新 index.html 吗？页脚：<Grid container spacing={2} className={classes.container}> <Grid xs={12}> <a href='https://twitter.com/loremipsum'> <SocialIcons> <FaTwitter className={classes.icon} /> </SocialIcons> </a> <a href='https://www.facebook.com/loremipsum'> <SocialIcons> <FaFacebookSquare className={classes.icon} /> </SocialIcons> </a> <a href='https://www.linkedin.com/company/loremipsum'> <SocialIcons> <FaLinkedin className={classes.icon} /> </SocialIcons> </a> </Grid></Grid>页脚样式：export const useStyles = makeStyles({container: {backgroundColor: 'black',color: '#F5F5F5',borderTop: '5px solid #669999',marginTop: 20,},icon: {width: 20,height: 20,color: '#669999',marginTop: 10,marginBottom: 10,marginLeft: 10,marginRight: 10,},});export const SocialIcons = styled.div`transition: transform 250ms;display: inline-block;&:hover {transform: translateY(-2px); }`;Index.html 正文<body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body>
2 回答
繁花如伊
TA贡献2012条经验 获得超12个赞
我通过将所有内容放在一个页面容器中并在除页脚之外的所有内容中放置一个内容包装器来获得它。
应用程序.jsx
const App = () => (
<div className='App'>
<div className='page-container'>
<div className='content-wrapper'>
<NavigationBar />
</div>
<Footer />
</div>
</div>`);`
应用程序.css
.page-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content-wrapper {
flex: 1;
}
30秒到达战场
TA贡献1828条经验 获得超6个赞
这个想法是要有固定的页脚高度和主要内容高度，即所有高度减去页脚高度。
你的模板代码应该是这样的：
<div id="root">
<main>
Some main content
</main>
<footer>
Some footer content
</footer>
</div>
款式：
#root {
main {
min-height: calc(100vh - 100px);
}
footer {
height: 100px;
}
}
添加回答
举报
0/150
提交
取消