Question

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

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

正如您所见（在http://jsfiddle.net/kAk9Z/中），“被抄除”的身体延伸到其容器之外而不是仅填充。

如何让容器保持其大小，同时将“已转换”<div>填入剩余空间？

Answer 1

为什么不让你在内体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; 
}

小提琴：http://jsfiddle.net/kAk9Z/4/

Answer 2

这不是box-sizing问题，当你声明高度100％时，它被称为父元素的高度，它已经包含一个div，所以.container＆的高度之和＃39; s的孩子是＆gt; 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;
}

盒子尺寸，为什么高度＆gt; 100％？

2 个答案: