Question

我有这样的div结构，

<div style="height:100%">
    <div style="height:50px"></div>
    <div id="auto" style="height:100%"></div>
</div>

但似乎id="auto"将高度作为其父高度并且父级溢出。可以用id=auto div获取父级剩余高度的方式设置css吗？我试图做的是让id=auto div占用父div调整大小的剩余空间。

这是jsFiddle

Answer 1

这是因为height属性的百分比值是相对于包含块的框的高度。因此100%表示整个高度。

<强> 10.5 Content height: the 'height' property

指定百分比高度。百分比用计算   尊重生成的框containing block的高度。如果   未明确指定包含块的高度（即，它   取决于内容高度），这个元素不是绝对的   定位后，该值计算为＆＃39; auto＆＃39;。高度的百分比   root element与initial containing block相关。

一种解决方案是使用第二个<div>元素的负余量来移除srcollbar，然后将position: relative;添加到第一个，以将其恢复到第二个的顶部。

在这种情况下，我们应该在第二个div的顶部使用padding来推送其内容并添加box-sizing: border-box以计算包含填充边框的框的高度：

<强> Example Here

<div class="parent">
    <div class="top"></div>
    <div class="content"></div>
</div>

.parent { height:100%; }

.top {
    height: 100px;
    position: relative;
}

.content {
    background-color: gold;
    min-height: 100%;

    margin-top: -100px; /* equals to the height of .top element */
    padding-top: 100px; /* equals to the height of .top element */

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

值得注意的是这种方法would work on IE8+。

现在所有主要的网络浏览器都支持box-sizing: border-box，但您使用spacer元素而不是padding + box-sizing来推送.content的内容：

<强> Example Here

<div class="content">
    <div class="spacer"></div>
    <!-- content goes here -->.
</div>

.spacer, .top {
    height: 100px;
}

此方法适用于 IE 6/7 + ^（*）

或者，您可以将.top元素嵌套在.content中并删除.parent，以便获得与 IE 6/7 + <相同的结果/强> ^（*）

<强> Example Here

<div class="content"> <div class="top"></div> <div class="inner">  </div> </div>

_{（*）IE6 + 使用height属性， IE7 + ，使用min-height。}

Answer 2

如果您不需要支持IE8或IE9，请使用CSS calc（http://caniuse.com/calc）

<div style="height:100%">
    <div style="height:50px"></div>
    <div id="auto" style="height:calc(100%-50px);"></div>
</div>

如果你确实需要支持旧的IE，那么我建议使用display：table，display：table-cell和display：table-row。使用表格显示时要记住很多小怪癖，如果可能的话，请坚持使用计算。

Answer 3

如果您可以绝对定位第一个子div（高度为100像素的那个），则可以获得所需的结果：

演示：http://jsfiddle.net/rn2Xe/2/

<div style="height:100%; padding-top:100px; box-sizing: border-box; position: relative;">
    <div style="height:100px; position: absolute; top: 0; width: 100%; box-sizing: border-box;"></div>
    <div style="height:100%;"></div>
</div>

注意：使用CSS类。您的代码可能很多更清洁。

Answer 4

您可以使用css calc解决此问题，但如果您需要良好的遗留支持，请使用表格。

为什么div不占用剩余空间

4 个答案: