CSS - 填充剩余高度(动态内容)

Question

<div id="header">
    <div>My</div>
    <div>Header</div>
</div>
<div id="content"></div>

在上面的标记中，如何让内容填充屏幕的其余部分(无滚动)？如果标题具有固定高度，我知道如何使用绝对位置执行此操作，但我的标题高度是由其内容动态设置的(因此该网站在移动设备上具有响应能力。)

顺便说一句:我正在寻找仅 CSS 的解决方案，因为我认为 JavaScript 不适合此类任务。

非常感谢，

Answer 1

最简单的方法是在body中绘制背景并保持#content半透明。 <强> DEMO 1 。

这样，您就不会介意 #header 和 #content 高度。

---

如果您不介意 IE7 及更低版本，那么从 HTML 表格元素的默认 display 中获取的 display:table/table-row/table-cell 可以是您需要，在 header 高度未知的情况下。 <强> DEMO 2

您的结构需要进行一些更新，以便按预期行事并避免从标题部分到内容部分的布局渲染出现间隙。

如果您将 display 重置为用作表格属性，它将执行此操作并可以绘制列和行。

由于只有行属性有用，因此结构必须呈现为单列和多行。

基本结构需要这样转变:

<div id="header" class="row">
    <div class="single">
        <div>My</div>
        <div>Header than can grow</div>
    </div>
</div>
<div id="content" class="row">
    <div class="single">
        <p>My Content that will fill remaining space untill page has to scroll</p>
    </div>
</div>

基本的 CSS 是这样的:

html, body {
    height:100%;
    width:100%;
    margin:0;
}
body {
    display:table;/* it will allow to grow over initial width specified */
    /* table-layout:fixed; only if you want to control width within value specified*/
    background:#edc;
}
.row {
    display:table-row;/* we want these elements to stack on top of each other, not to become cells aside each other */
}
.single {
    display:table-cell;/* this 'buffer' element is used to avoid layout to turn into multiple cols */
}
#content {
    height:100%;/* since layout is the one taken from table properties, it means  fill all space avalaible that #header doesn't use */
    background:#cde;
}

---

在这种情况下，*#header有一个已知的***高度，它可以设置在固定或绝对位置。#content 可以是 100% height DEMO 3 ，更好:min-height:100%; DEMO 4

display:flex 也可能有用，但仅适用于真正的年轻浏览器:)。

---

<强> Example with 显示:flex;

html {
    height:100%;
}
body {
    margin:0;
    min-height:100%;
    background:#edc;
    display:flex;
    flex-direction:column;
}
#header {
/* nothing needed here */
}
#content {
    flex:1;/* since it is the only one getting a flex attitude, it will fill up all space avalaible*/
    background:yellow;
}