Question

我不是CSS专家，我也不明白为什么我的右下角div无法按预期工作。

我正在使用jquery扩展（可调整大小的jquery）来调整某些面板的大小，我希望我的最后一个div .overflow-container（级别2）保持其父div #resizable-panel-right-bottom的大小（ 1级）。可以，但是如果我在内部div .overflow-content（级别3）中设置了一个较高的高度，那么.overflow-container（级别2）的高度将不再正确。

我在codepen上有我想做的事情的草稿：

#resizable-panel-right-bottom {
    flex: 1 1 auto;
    min-height: 200px;
    padding: 5px;
}
.overflow-container {
  height: 100%;
  padding: 5px;
  background: aqua;
  overflow: scroll; /*should be "overflow: auto" I know*/
}
.overflow-content {
  height: 1000px;
  padding: 5px;
  background: pink;
}

目标是在最后一个div中有一个jquery数据表（来自datatables.net）。

实际上我正在使用以下JS库： jQuery 3.3.1 bootstrap 4 jquery-resizable

还有bootstrap 4 styles

Answer 1

您需要重新配置高度定义。

问题是您在整个HTML结构中分散了height: 100%。但是，要正确识别百分比高度，它们必须在父级上具有定义的高度。

像在某些地方使用flex-basis: auto一样，弯曲高度并不总是足够的。

请参阅：

另请参见MDN：

为了使overflow生效，块级容器必须具有设置的高度（height或max-height）或white-space设置为{{ 1}}。

元素溢出父级和滚动条不起作用

1 个答案: