html - 包含开放层控制 div 的表中断

Question

我有一个 openlayers 控件，它用 position:absolute 定位在 map 上。这个 div(它打开一个可关闭的)包含 3 个组件:一个顶部标题(只是一些文本)一个表格(.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 有多高(响应式)，分页器都应该始终显示在底部，并且表格应该有完整的中间部分。如果表格太长甚至超出页面本身，表格就会完全脱离 div。

旁白:它是一个带有 Angular Material 表的 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%;
}