html - 如何为div设置动态高度

Question

是否有可能有一个 div 高度取决于其他 div 的大小？

这是例子

<div id="wrapper" style="height:400px;background-color:green;">

   <div id="content1" style="height:auto;min-height:50%;background-color: limegreen;">
       Content 1
   </div>

   <div id="content2" style="min-height:20%;background-color:lightblue;">
        Content  2
</div>

<div id="content3" style="min-height:20%;background-color:blue;">
      Content 3 
</div>

</div>

你也可以在这里看到:http://jsfiddle.net/kXfsY/28/

您可以看到，div 包装器没有与其他 div 重叠。我想让 div content1 的高度至少为 div 包装的 50% 或更多，这样整个 div 包装就会重叠。 div 内容 2 和 3 的大小是动态的，取决于里面有多少元素。或者 div content 2 或 div content 3 可能为空，如果 div content1 会增加并使用 div 包装器的全高，那就太好了。

这可能吗？

谢谢

Answer 1

您可以使用 display: table 和 display: table-row 来做到这一点。您可以删除 #content2/#content3 元素或将它们设为空标签。 `#content1 元素无论如何都会占用所有剩余空间。

http://codepen.io/cimmanon/pen/pHAcJ

#wrapper {
  height:400px;
  background-color:green;
  display: table;
  width: 100%;
  table-layout: fixed;
}

#content1 {
  min-height:50%;
  background-color: limegreen;
  display: table-row;
}

#content2, #content3 {
  height:20%;
  display: table-row;
}

#content2:empty, #content3:empty {
  display: none;
}

#content2 {
  background-color:lightblue;
}

#content3 {
  background-color:blue;
}