javascript - 如何在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;
}

fiddle :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/

干杯!