2

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

    <div id="container" style="position:absolute; left:20px; top:20px; height:300px; width:400px;">
        <div id="header" style="width:100%;">此处的标题内容... </div>
        <div id="content">这里的内容... </div>
    </div>

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

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

4

2 回答 2

1

看看这个小提琴或其输出。尝试调整窗口大小。

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 占用所有可用空间:)

于 2013-06-27T21:32:10.663 回答
1

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

您还需要引入填充以防止边距崩溃。否则像 <h1> 这样的东西会看起来很有趣。

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;
}
于 2013-07-01T20:52:24.357 回答