网页主体内容高度不定，如何让footer在高度太低的时候固定在底下，长的时候被顶下去？

Question

而且能不能用calc()实现，就不用js了？

Answer 1

HTML:

<div class="page-wrap">
  
  Content!
      
</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

CSS:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}

参考：Sticky Footer

Answer 2

一个比较ok的方案还是使用js吧？

1. 判断网页高度是否大于单屏高 。

2. 使用响应式布局来做判断？

Answer 3

main{
box-sizing: border-box;
min-height: 100vh;
padding-bottom: 100px;
}
footer{
height: 100px;
margin-top: -100px;
}

Answer 4

footer 上面的 content 部分的div给个min-hight:1000px;之类的，min-height当里面的内容高度大于1000px的时候自动变高，反之会保持1000px高度，1000px你可以看着制定

Answer 5

获取高度，用js固定吧

Answer 6

html {
    position: relative;
    min-height: 100%;
}
body {
    padding-bottom: 200px;
}
footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
}