div+css布局，定位与自适应

Question

head固定50px

foot固定50px

中间内容自适应，开始刚好填满整个页面，如果中间内容多，就会出现滚动条滚动效果。

求有好的思路分享~

很好的面试题

Answer 1

html,body{height: 100%;position: relative;margin: 0}
#head{position: absolute;top: 0;left: 0;width: 100%;height: 50px; background-color: lightsalmon}
#foot{position: absolute;bottom: 0;left: 0;width: 100%;height: 50px; background-color: lightsalmon }
#container{height: calc(100% - 100px);padding: 50px 0 0;width: 100%; overflow-y:scroll;background-color: gray}

Answer 2

head,foot设定高度50px,分别固定定位在上下方，中间内容为main,上下边距50px,高度百分百，溢出设定滚动

Answer 3

![图片上传中...]
foot应该在最下面 我现在也在面对这个问题。。

Answer 4

“开始刚好填满”、“滚动条”，
中间也是定高嘛，高度就是calc(100% - 100px)。

Answer 5

head,foot都fixed固定，中间部分上下padding：50px；

Answer 6

将footer固定在页面底部的实现方法
推荐用前两种css的方法