页脚不粘在 React 页面的底部
我创建了一个页脚并将其放在 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>
烙印992回答
-
繁花如伊
我通过将所有内容放在一个页面容器中并在除页脚之外的所有内容中放置一个内容包装器来获得它。应用程序.jsxconst 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秒到达战场
这个想法是要有固定的页脚高度和主要内容高度，即所有高度减去页脚高度。你的模板代码应该是这样的：<div id="root"> <main> Some main content </main> <footer> Some footer content </footer></div>款式：#root { main { min-height: calc(100vh - 100px); } footer { height: 100px; }}
随时随地看视频慕课网APP
相关分类
JavaScript