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>

如何在div内制作100％的高度？

2 个答案: