html – CSS中的一个扩展中间层

概述我将如何设计一个具有固定高度页眉和页脚(连接到浏览器窗口的顶部和底部)但扩展中间的网站.滚动条仅适用于中间(图中的橙色部分),因此页面的其余部分永远不需要滚动.我在下面画了一个模型来更清楚地解释. 理想情况下,它需要完全用CSS和HTML实现(没有javascript小提琴！).我已经对这个问题做了很多但是我不能强制橙色部分填满剩余的空间(如果它没有满足)并且如果它溢出则开始滚动. 我想这就是你想 我将如何设计一个具有固定高度页眉和页脚(连接到浏览器窗口的顶部和底部)但扩展中间的网站.滚动条仅适用于中间(图中的橙色部分),因此页面的其余部分永远不需要滚动.我在下面画了一个模型来更清楚地解释.

理想情况下,它需要完全用CSS和HTML实现(没有JavaScript小提琴！).我已经对这个问题做了很多但是我不能强制橙色部分填满剩余的空间(如果它没有满足)并且如果它溢出则开始滚动.

解决方法 我想这就是你想要的：

Live Demo(edit)

HTML：

<div ID="header">Patrick</div><div ID="content">..</div><div ID="footer">Beardmore</div>

CSS：

HTML,body {    margin: 0;    padding: 0;    border: 0;    overflow: hIDden}#header,#content,#footer {    position: absolute;    left: 0;    wIDth: 100%}#header {    top: 0;    height: 100px;    background: #ccc}#content {    top: 100px;    bottom: 100px;    overflow-y: auto}#footer {    bottom: 0;    height: 100px;    background: #ccc}

总结

以上是内存溢出为你收集整理的html – CSS中的一个扩展中间层全部内容，希望文章能够帮你解决html – CSS中的一个扩展中间层所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。