如何使用 CSS 垂直"stack"这些 DIV？

Question

下面是我正在使用的代码:

#contains_upper_and_lower_panes {
overflow: hidden;
overflow-y: hidden;
overflow-x: hidden;
background: white;
margin-top: -113px; /* shifting up to cover up something above the container */
height: 100%;
width: 45rem;
}
.halfPane {
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
height:50%;
}

<div id="contains_upper_and_lower_panes">
<div id="upper_pane" class="halfPane">
<h3>top</h3>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
<div id="lower_pane" class="halfPane">
<h3>bottom</h3>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
</div>

…只要没有太多的段落，这就可以很好地工作。

然而，如果你在一个/两个部分的段落数量翻倍，突然容器div显示一个滚动条，两个窗格的height变得比50%大(它们也都显示一个滚动条)。

目标是外部容器永远不显示滚动条，而上下窗格保持在50%的高度，并在必要时每个显示滚动条。

我在这里做错了什么?

Answer 1

在#contains_upper_and_lower_panes中设置高度为100vh，所以它在任何设备上都设置为全屏，这样你的height: 50%在half pane类中就会生效

#contains_upper_and_lower_panes {
overflow: hidden;
overflow-y: hidden;
overflow-x: hidden;
background: white;
margin-top: -113px; 
/* Modify this line below */
height: 100vh;
width: 45rem;
}

然后你可以玩半窗格的高度或宽度为更好的结果