Table 中断包含打开层控件 div

Question

我得到了一个 openlayers 控件，它位于地图上 position:absolute。这个 div（它打开一个可关闭的）包含 3 个组件：一个顶部 header（只是一些文本）一个 table（.middle）和一个分页器（.bottom）

.main {
  position: absolute;
  top: 4.5em;
  bottom: 10em;
  right: 0.5em;
  text-align: left;

  min-width: 200px;
  max-width: 600px;
  width: 100%;
}

.top {

}

.middle {
  overflow: auto;
}

.bottom {
  position: absolute;
  bottom: 0;
}

无论 div 最后有多高（响应式），寻呼机都应始终显示在底部，并且 table 应该有完整的中间部分。如果 table 变得太长甚至超出页面本身，它就会完全脱离 div。

旁白：它是一个带有 Angular Material Table 的 Angular 组件。

Answer 1

从 .main 中删除 bottom 并使用 margin + min-height 代替

.main {
  position: absolute;
  top: 4.5em;

  // bottom: 10em;
  margin-bottom: 10em;
  min-height: 100%;

  right: 0.5em;
  text-align: left;
  min-width: 200px;
  max-width: 600px;
  width: 100%;
}

Table 中断包含打开层控件 div

Table breaks containing open layers control div

html

css

angular

openlayers

css-tables