底部固定

作者: sunny519111 | 来源:发表于2017-08-08 17:54 被阅读10次

使用calc()方法

main{
  height: calc(100vh-footer的高度)
}

HTML部分

  <main>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1><h1>hello</h1>
     <h1>hello</h1><h1>hello</h1> <h1>hello</h1><h1>hello</h1> <h1>hello</h1><h1>hello</h1> <h1>hello</h1><h1>hello</h1> <h1>hello</h1><h1>hello</h1> <h1>hello</h1><h1>hello</h1> <h1>hello</h1><h1>hello</h1> <h1>hello</h1><h1>hello</h1> <h1>hello</h1><h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
  </main>
  <footer></footer>

css部分

body,h1,h2,p {
  margin: 0;
}
main {
  height: calc(100vh - 40px);
  overflow-y: scroll;
  background: #ccc;
   
}
footer {
  height: 40px;
  background: #000;
}

查看链接