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

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

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

如您所见（在http://jsfiddle.net/kAk9Z/中），“被遮盖的”主体超出了其容器的范围，而不仅仅是填充。

如何使容器保持其大小，同时将“被遮盖的” <div>填充剩余的空间？

最佳答案

这不是一个box-sizing问题，当您声明高度100％时，它是指父元素的高度，该父元素已经包含div，因此.container子元素的高度之和> 100。

可以将容器主体切换为position: absolute，这是一个小提琴：http://jsfiddle.net/kAk9Z/2/

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

.container-body {
    background-color: white;
    border: 1px solid black;
    padding: 8px;
    position: absolute;
    top: 30px;
    bottom: 4px;
    right: 4px;
    left: 4px;
}

关于html - 盒子大小，为什么高度> 100％？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23618537/