Html 使用100%的外部分隔高度的内部分隔'；s%基于自身

我使用的是bootstrap3

我使用的布局占据了视口的100%高度。我不希望页面滚动（这是一个管理页面）

使用网格系统，我创建了两行，每行占屏幕的50%。这很有效

问题：在这两行所包含的单个单元格中，我放置了我想随着屏幕大小的调整而溢出（滚动）的内容。不幸的是，除非我给这个div指定一个固定的像素高度，否则内容不会溢出

问题：如何使内部div的溢出内容占据单元格可用高度的100%，而单元格本身占屏幕总高度的50%呢

JsFiddle：

A节标题
a

a

a

a

a

a

a

a

a

a

a

a

B节标题
b

b

b

b

b

b

b

b

b

b

b

b

b

b

b

当您将

全高

赋予

col-md-12

div，并让

溢出容器

具有一定的百分比时，它将很好地滚动

A节标题
...

。溢出容器{
溢出y：滚动；
身高：70%；
}

参见修改的

更新：

如果你幸运地忽略了旧的浏览器，你可以试试。你可以加上

display: flex;
flex-direction: column;

至

col-md-12

div

移除

height: 70%;

从

溢出容器中

完成后，请参阅

您甚至可以删除一些

div

层，并将HTML简化为

A节标题
...

并让flexbox处理外部和内部尺寸

.container、.overflow包装器{
显示器：flex；
弯曲方向：立柱；
}
.溢流容器{
溢出y：滚动；
}

---

感谢Olaf，但是这里有一个小问题：如果高度设置为100%，溢出与标题重叠。我想这就是为什么您将值设置为70%，而不是100%。由于标题的高度（以像素为单位）是已知的，有没有办法在不冒大的空白风险的情况下满足这一要求？如果您有固定大小的标题，您可以使用

position:absolute

和

top:30px；底部：0例如。但我还没有找到一个有效的解决方案。干杯，奥拉夫，我找到了calc（100%-20px）的参考，但从我的试验中，我也找不到一个有效的解决方案，因为20px虽然在语法上是有效的，但似乎没有被正确解释。嗨，奥拉夫，我尝试了flexbox，虽然它可以工作，但我将使用基于jquery的解决方案来解决“像素偏移”问题。原因是，尽管jquery并不像成熟的css解决方案那样优雅，但jquery代码允许非常精确地将元素大小调整到单个像素，而不会对性能造成太大影响。flexbox解决方案在语法上可能“更好”，但它在元素重叠方面会引起一些问题，尽管有些许重叠。谢谢你的帮助，节日快乐！
height: 70%;