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内容2或div内容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;
}

如何为div制作动态高度

1 个答案: