如何在div内设置100％的高度？

Question

<div id="a">
    <div style="background-color: green;">content above blue div</div>
    <div id="b">I want this as height as the #a<br /> and if bigger, I want to get<br /> scrollbars</div>
</div>

#a
{
    height: 100px;
    background-color: yellow;
}

#b
{
    background-color: blue;
}

小提琴： http : //jsfiddle.net/29ao3oLq/1/

蓝色div中的内容可以更长，现在我想和黄色div一样高。 但我不知道高度，因为有一个绿色的div，高度未知。

Answer 1

这个CSS，使用flexbox应该可以做到。

#a
{
    height: 100px;
    background-color: yellow;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */    

}

#c
{
    background-color: green;

}

#b
{
    background-color: blue;
    overflow: auto;
    flex: 1;
}

几乎不适应HTML：

<div id="a">
    <div id="c" >content above blue div</div>
    <div id="b">I want this as height as the #a<br /> and if bigger, I want to get<br /> scrollbars<br /> scrollbars<br /> scrollbars<br /> scrollbars<br /> scrollbars<br /> scrollbars<br /> scrollbars</div>
</div>

了解更多： http : //css-tricks.com/snippets/css/a-guide-to-flexbox/

看到它： http : //jsfiddle.net/29ao3oLq/3/

干杯!

Answer 2

如果添加几个包装器元素，则可以使用CSS表实现此布局。

如果内容过长（可能会出现滚动条），则可能需要修改此设置。

 #a { height: 100px; width: 100%; background-color: yellow; display: table; } #b { background-color: blue; height: 100%; } #a div.row { display: table-row; } #a div.row div { display: table-cell; } 

 <div id="a"> <div class="row r1"> <div style="background-color: green;">content above blue div<br>more stuff</div> </div> <div class="row r2"> <div id="b">I want this as height as the #a <br />and if bigger, I want to get <br />scrollbars</div> </div> </div>