无数次：CSS，*自动大小*标题和100％高度内容

Question

这是我想要实现的目标。我有这些行的HTML（实际上我当然使用单独的CSS文件）：

    <div id="container" style="position:absolute; left:20px; top:20px; height:300px; width:400px;">
        <div id="header" style="width:100%;">header stuff here...</div>
        <div id="content">content stuff here...</div>
    </div>

我希望标题的高度自动，而父div的其余部分将被内容占用。内容应该完全填写 - 没有滚动条或任何东西。假设现代浏览器，我不关心IE6甚至IE7。

到目前为止我见过的所有例子都假定了固定的标题高度。可以在没有JavaScript的情况下实现自动调整大小的标头，还是超出了现代浏览器的功能？

Answer 1

查看this fiddle或its output。尝试调整窗口大小。

<强> HTML：

<div id="container" style="height: 100%;">
    <div id="header" style="width:100% ">some stuff here...</div>
    <div id="content">ome other stuff here...</div>
</div>

<强> JS：

$(document).ready(function () {
    var header_height = $("#header").height();
    var content_height = $("body").height() - header_height;
    $("#content").height(content_height);
});

$(window).resize(function () {
    var header_height = $("#header").height();
    var content_height = $("body").height() - header_height;
    $("#content").height(content_height);
});

<强> CSS：

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
#header {
    height: auto;
    background-color: green;
}
#content {
    width: 100%;
    background-color: blue;
}

即使我们调整窗口大小，JS也可以帮助内容div获取所有可用空间:)

Answer 2

毕竟可以用CSS完成。您需要使用display:table并将内容窗格高度设置为100％。不幸的是，您还需要一个额外的＆lt; div＆gt;内部标题和内容。 JSFiddle链接在这里：http://jsfiddle.net/RBHXm/3/。如果您愿意，也可以添加页脚：http://jsfiddle.net/DE8pA/3/

您还需要引入填充以防止margin collapse。否则像＆lt; h1＆gt;这样的东西看起来很有趣。

HTML：

<div id="container">
    <div id="header" ><div><h1>Header stuff<br />here...</h1></div></div>
    <div id="content"><div><p>content stuff here...</p></div></div>
</div>

CSS：

/* colors to make the demo clear: */
#container { background: #ddd; }
#header { background: #ddf; }
#content { background: #dfd; }

/* CSS provided in question: */
#container {
    position: absolute;
    left: 20px;
    top: 20px;
    height: 300px;
    width: 400px;
}
#header {
    width: 100%;
}

/* your fix: */
#container {
    display: table;
}

#container > * {
    display: table-row;    
}

#content {
    height: 100%;
}

#container > * > * {
    display: table-cell;
    padding: 0.01px;
}

/* optional styles to make it look pretty */
#content > div {
    border: 2px solid green;
}

#header h1 {
    text-align: center;
    margin: 3px;
    color: blue;
}