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

发布时间：2020-12-14 21:16:41 所属栏目：资源来源：网络整理

导读：我将如何设计一个具有固定高度页眉和页脚(连接到浏览器窗口的顶部和底部)但扩展中间的网站.滚动条仅适用于中间(图中的橙色部分),因此页面的其余部分永远不需要滚动.我在下面画了一个模型来更清楚地解释. 理想情况下,它需要完全用CSS和HTML实现(没有javascrip

我将如何设计一个具有固定高度页眉和页脚(连接到浏览器窗口的顶部和底部)但扩展中间的网站.滚动条仅适用于中间(图中的橙色部分),因此页面的其余部分永远不需要滚动.我在下面画了一个模型来更清楚地解释.

理想情况下,它需要完全用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
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!