13问答网 > CSS如何做到页面固定高度，header置顶footer固底page内容超过页面长度后可上下滚动。

CSS如何做到页面固定高度，header置顶footer固底page内容超过页面长度后可上下滚动。

页面设置100%高度，header、footer固定高度50px。效果就这样。

2025-03-09 08:20:06

推荐回答（5个）

回答1：


html,body{height:100%;}/*定义高度为100%*/
*{margin:0;padding:0;}
.header,.footer{width:100%;height:5%;background:#000;}/*上下高度5%；中间盒子高度90%*/
.main{overflow-y:scroll;width:100%;height:90%}  
.main p{height:1500px;width:100%;text-align:center;line-height:1500px;}

高度1500px

顶部和底部高度5%；中间盒子高度90%，这样刚好100%，你内容填充到中间的盒子就行，如果需要特殊样式，顶部和底部可以用position定位，main盒子加上margin-top、margin-bottom分别等于顶部和底部的高度就行

所有div的总高度不能大于100%，不然会出现2个滚动条，因为现在的滚动条是main盒子的，如果超过100%；浏览器的滚动条也会出现

回答2：

比如你page内容定义在在css中定义为page_box,那么你就设置overflow：auto或者scroll，多出的内容便会以滑动条方式展示。

回答3：

overflow 让你中间内容区容器出现滚动条就行了。

回答4：

。。我感觉看了你们的就突然小白了。。
之前做过的网页我有用过 position: absolute; 用了之后它就固定不动了，你用在footer上应该就能把它固定。。

回答5：

要看你想要让他怎么显示了

下面这个代码应该可以帮到你


头部

中间
中间
中间

中间信息

底部

这样写的话中间溢出的话右侧就会自动出现下拉菜单了

希望可以帮到你~~