而且能不能用calc()实现,就不用js了?
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
html {
position: relative;
min-height: 100%;
}
body {
padding-bottom: 200px;
}
footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 200px;
}
main{
box-sizing: border-box;
min-height: 100vh;
padding-bottom: 100px;
}
footer{
height: 100px;
margin-top: -100px;
}
footer 上面的 content 部分的div给个min-hight:1000px;之类的,min-height当里面的内容高度大于1000px的时候自动变高,反之会保持1000px高度,1000px你可以看着制定
一个比较ok的方案还是使用js吧?
判断网页高度是否大于单屏高 。
使用响应式布局来做判断?
获取高度,用js固定吧