页脚不粘在 React 页面的底部

Question

我创建了一个页脚并将其放在 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>

Answer 1

想法是固定页脚高度和主要内容高度，即所有高度减去页脚高度。

您的模板代码应如下所示：

<div id="root">
  <main>
    Some main content
  </main>
  <footer>
    Some footer content
  </footer>
</div>

样式：

#root {
  main {
    min-height: calc(100vh - 100px); 
  }
  footer {
    height: 100px;
  }
}

Answer 2

我通过将所有内容放在一个 page-container 和一个 content-wrapper 中来得到它，除了页脚。

App.jsx

const App = () => (
  <div className='App'>
    <div className='page-container'>
      <div className='content-wrapper'>
        <NavigationBar />
      </div>
      <Footer />
   </div>
 </div>`);`

App.css

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content-wrapper {
  flex: 1;
}

页脚不粘在 React 页面的底部

Footer Not Sticking to Bottom of React Page

html

javascript

css

footer

reactjs