html - 盒子大小，为什么高度 > 100%？

Question

我正在尝试为一个简单的面板创建标记。结构如下。 <div>带有“transcluded”的它应该填充它的父容器<div> .

<div class="container">
    <div class="container-title">title</div>
    <div class="container-body">
        transcluded
    </div>
</div>

如您所见(在 http://jsfiddle.net/kAk9Z/ 中)，“嵌入”的主体超出了其容器，而不是仅填充。

如何让容器保持其大小，同时“包含”<div>填写剩余空间？

Answer 1

你为什么不在 body 内部 div 上设置你的高度。这样它将确定容器 div 的高度，并且您会得到想要的结果。您甚至可以选择最小高度，并在内容需要时让它增长。像这样:

.container {
    width: 640px; 
    background-color: #dededd; 
    padding: 4px;
}

.container-body {
    background-color: white; 
    height: 100%; 
    border: 1px solid black; 
    padding: 8px;
    min-height: 460px; 
}

还有 fiddle :http://jsfiddle.net/kAk9Z/4/