使用absolute和relative设置页脚的不同？

Question

css.footer{
height:70px;
width:100%;
background-color:#f7f7f7;
border-top:1pxsolid#dbdada;
position:absolute;
bottom:0;
left:0;
}
如果设置div.footer设置为absolute的会固定死一屏的底部，
如果设置div.footershe设置relative的话，页面内容很少不到一屏，页脚就不在
页面的底部了，如何二者兼得？

Answer 1

直接上代码吧。footer自适应html{height:100%;}body{margin:0;padding:0;position:relative;min-height:100%;}div{text-align:center;font-size:14px;}.header{height:80px;color:#fff;background-color:#f95b82;}.body{border:1pxsolid#000;height:500px;padding-bottom:80px;}.footer{color:#fff;width:100%;position:absolute;top:0;bottom:0;}.footerdiv{position:absolute;bottom:0;height:80px;width:100%;background-color:blue;}headerbodyfooterer之前也有这样的需求，可是后面还是没做。一个成熟的产品一般不会没有内容的。也可以用js试试，就不会有那么乱七八糟的css了。

Answer 2

结构：(伪代码)slimbody.content-container.footer样式：scsshtml,body{height:100%;}.content-container{min-height:100%;margin-bottom:-70px;padding-bottom:70px;box-sizing:border-box;}.footer{height:70px;}注：以上只写了必要的代码，你可以按需添加别的代码