0

是否有可能具有取决于其他 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 包装器的完整高度会很好。

那可能吗？

谢谢

4

1 回答 1

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;
}
于 2013-03-08T15:57:29.503 回答