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

问题描述

问 题

head固定50px

foot固定50px

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

求有好的思路分享~

很好的面试题

解决方案

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}

这篇关于div+css布局，定位与自适应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！