1

而且能不能用calc()实现,就不用js了?

Kinice 339
2016-02-07 提问
2

除夕夜继续涨姿势的同学,运气一定不会太差!

getni7 · 2016年02月08日

展开评论
6 个回答
3

已采纳

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

0

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

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

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

0

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

0

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

0

获取高度,用js固定吧

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

撰写答案

推广链接