标题

Question

我在一个容器中有2个div（实际上我将第一个标记为h1）并且我希望第二个div获取它的父div的剩余空间。执行height:100%会使其使用其父高度的100％，因为其他div会使其大于父级。在演示中，您可以看到蓝色通过灰色。

如何告诉它使用剩余高度？ HTML可能会改变，但尽量不要疯狂

HTML：

<div class="outer_box">
    <div class="container">
         <h1>Title</h1>

        <div class="box">Box</div>
    </div>
    <div class="container">
         <h1>Title</h1>

        <div class="box2">Box</div>
    </div>
</div>

CSS：

.outer_box {
    height: 500px;
}
.container {
    width: 30%;
    height: 100%;
    background-color: grey;
    float:left
}
.box {
    background-color: blue;
    height: 100%;
}
.box2 {
    background-color: green;
}

Answer 1

您可以执行CSS表格布局，并将box设置为height:100%以将标题推送到最小高度。

http://jsfiddle.net/0w7pqeo6/3/

＆＃13;

.outer_box {
    height: 300px;
}
.container {
    width: 30%;
    height: 100%;
    background-color: grey;
    float: left;
    display: table;
}
.container h1, .container > div {
    display: table-row;
}
.box {
    background-color: blue;
    height: 100%;
}
.box2 {
    background-color: green;
    height: 100%;
}

＆＃13;

<div class="outer_box">
    <div class="container">
         <h1>Title</h1>
        <div class="box">Box</div>
    </div>
    <div class="container">
         <h1>Title</h1>
        <div class="box2">Box</div>
    </div>
</div>

＆＃13;

Answer 2

http://jsfiddle.net/utsavoza/9v0dfv39/

HTML部分

标题

    <div class="box">Box</div>
</div>
<div class="container">
     <h1>Title</h1>

    <div class="box2">Box</div>
</div>

CSS

.outer_box {
height: 500px;
}
.container {
width: 30%;
height: 100%;
background-color: grey;
float:left
}
.box {
background-color: blue;
height: 84%;
}
.box2 {
background-color: green;
height: 84%;
 }

使用高度84％而不是100％。你可以在上面的链接中看到它..

如何让div占据父母的剩余高度？

2 个答案:

标题