Html 列中可独立滚动的div

我有一个

div

（主要内容区），它有两个div（顶部和底部）

我需要在页面上同时显示顶部和底部div，但需要它们占用相同的空间量（50/50）。我还需要他们是可滚动的，当他们的内容是比可见的可用空间长

我让两个div在顶部和底部对齐，但它们占用的空间不一样（50/50）。此外，如果其中一个的内容比另一个多，它就会增长，我最终不得不滚动页面，而不是像我所希望的那样滚动

div

这是我的密码：

#内容{
身高：100%；
}
#划船{
身高：100%；
溢出y：滚动；
}

顶级内容
底部内容

以下是使用flexbox执行此操作的方法：

#内容{
高度：300px；
宽度：400px；
显示器：flex；
弯曲方向：立柱；
背景色：红色；
保证金：自动；
填充：10px；
}
#上，#下{
弹性：1；
溢出y：自动；
}
#顶部{背景色：黄色；}
#底部{背景色：绿色；}

我是一位尊贵的国际法学家。等径和小径。但是我的生命诅咒了我们。整型非猫科动物，例如Nunc eget厄洛斯厄洛斯。Nam aliquet酵素，pretium auctor nisl aliquet molestie。velit dapibus porttitor的孕妇。
Lorem ipsum dolor sit amet，是一位杰出的献身者。时间a的大相位，时间a的小相位。整只小金丝猴，一种金丝猴。在前一个星期。请在sapien maximus tincidunt进行测试。直径为2毫米，直径为2毫米。无交流电压。前庭位于梅特斯、埃吉斯塔斯、贝内纳提斯、阿利奎特等地。无便利。整数justo massa，排卵期非mauris et，威尼斯孕妇leo。孕期支持的矢状前庭。维韦拉酒后驾车。
我是一位尊贵的国际法学家。等径和小径。但是我的生命诅咒了我们。整型非猫科动物，例如Nunc eget厄洛斯厄洛斯。Nam aliquet酵素，pretium auctor nisl aliquet molestie。velit dapibus porttitor的孕妇。Aliquam Aliquam est eu Aliquam tincidunt。梅塞纳斯是佩伦茨克式的，不受饮食习惯的影响。如果车辆在道路上行驶，则会导致欧盟侵权行为。努尔拉姆在努克特里斯提克发酵罐的托托。Donec justo mi，ultrices sed finibus id，finibus非nibh。努克苏打水，尼布·伊库利斯门，维利特·萨皮恩·维库拉·普鲁斯，阿梅特·福西布斯·奥古斯·莱克图斯坐在马萨。Cras nec mauris eu sapien发酵调味品sed nec neque。

视点高度（VH）100% 将您的主要内容区域（在我的示例中为

正文

）设为

100vh

将使其成为页面高度的

100%

。然后将

divs

设置为

50%

正文{
高度：100vh；
}
#内容{
宽度：100%；
显示：内联块；
身高：100%；
}
#划船{
颜色：#fff；
身高：50%；
溢出y：滚动；
背景：#3b5998；
}
#行：第一种类型{
背景：红色；
}
#p行{
左侧填充：10px；
}

顶级内容

底部内容

无需使用FlexBox。可以使用以下单位将行的高度设置为视口的50%：

.row{
高度：50vh；
填充物：5px；
overflow-y:auto；/*或滚动，如果您希望始终显示滚动条*/
}
.顶{
背景色：#FFCDD2；
颜色：#B71C1C
}
.底部{
背景色：#BBDEFB；
颜色：#0D47A1
}

顶级内容
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。

谢谢。我只是简单地将内容高度改为100%，它可以根据我的需要工作。@pjdupreez我很高兴我能帮上忙！我修复了我犯的一个小错误，您可能想使用

overflow-y:auto

而不是

overflow-y:scroll

。太棒了。。。我会试试的，谢谢。使用您提供的内容，我设法将其更改为在Bootstrap3面板中使用，面板主体是可滚动的。