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 fiddles！）。我有这么多的问题，但是我不能强制橙色部分填补剩余的空间，当它不满（无论内容），并开始滚动，如果它溢出。

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:

Live Demo （编辑）

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屋！