不断扩大的中段CSS [英] An expanding middle in CSS

问题描述

我怎么会去设计一个网站，有一个固定高度的页眉和页脚（连接到浏览器窗口的顶部和底部），但不断扩大的中间。滚动条是只为中（图中橙色部分）使页面的其余部分将永远不需要滚动。我得出一个低于实体模型，解释得清楚。

How would I go about designing a website which has a fixed height header and footer (attached to the top and bottom of the browser window) but an expanding middle. The scroll bars would be only for the middle (orange section in diagram) so that the rest of the page would never need to scroll. I have drawn a mock-up below to explain more clearly.

在理想情况下，它需要在CSS和HTML完全实现（无JavaScript的小提琴！）。我有很远的这个问题，但我不能强迫橙色部分填补剩余空间时，它不是完整的（不管它的内容），并开始滚动，如果它溢出。

Ideally it needs to be entirely implemented in CSS and HTML (no javascript fiddles!). I've got quite far with this problem but I can't force the orange section to fill up the remaining space when it isn't full(whatever it's content) and start scrolling if it overflows.

推荐答案

我的认为的，这是你想要什么：

I think this is what you want:

现场演示的 （的编辑）

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
}

这篇关于不断扩大的中段CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！