Question

我正在尝试设置一个固定高度为350px的容器div，在该div内有2个子分区，两个子分区的高度都可变。

我现在的目标是，如果两个子分区的总和大于父div，则底部子分区将获得一个滚动条。

现在的问题是，无论我如何尝试，parent-div都会将最大高度扩展为350px。

这就是我现在的状态：

<div id="parent-left">
  <div id="top">
    Top-Content<br>
    Top-Content<br>
    Top-Content<br>
    Top-Content<br>
    Top-Content<br>
    Top-Content
  </div>
  <div id="bottom">
    Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>
    Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>
    Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>
    Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>
    Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>
    Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>
    Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>
    Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>Bottom-Content<br>
  </div>
</div>
<div id="parent-right">
  Other Div with actual height of 350px
</div>

#parent-left {
  height: 350px;
  background: red;
  width: 50%;
  float: left;
}

#parent-right {
  height: 350px;
  background: red;
  width: 50%;
  float: right;
}

#top {
    background:#5ae;
}

#bottom {
  background:#ea5;
  height:100%;
  overflow-y: auto;
}

http://jsfiddle.net/Lps0t2ze/

如您所见，“红色Div”（实际为350px的高度）不是相同的高度，因为左父div较大。

当我自己定义高度时（例如：http://jsfiddle.net/by96zof3/），我知道这是可能的，但这会杀死div的可变高度。

所以我想要的是＃parent-left div不会超过350px，但是我也不必在内部定义任何高度。

我可以使用JS（＆JQuery），但如果可能的话，我希望没有它的解决方案。

有人知道吗？

Answer 1

flex是你的朋友，我的朋友。

#parent-left {
  height: 350px;
  background: red;
  width: 50%;
  float: left;
  display: flex;
  flex-direction: column;
}

当父Div超过X高度时，使Bottom Div可滚动

1 个答案: