在 css/bootstrap 中填充最大高度

Question

如何实现地图使用全高？

<body class="d-flex flex-column">
<header class="flex-grow-0 flex-shrink-0">
header
</header>
<main class="flex-grow-1 flex-shrink-1">
main
  <div class="map-container row-content">
    <div id="map"></div>
  </div>
</main>
<footer>footer</footer>
</body>

css:

html,
body {
  height: 100%;
}

main {
  height: 100%;
  background-color: deepskyblue;
}

.map-container {
}

#map {
  height: 100%;
  background-color: lightsalmon;
}

当我将 height 100% 添加到 map-container 时，高度会太高并且可以看到滚动条。我的页脚高度可变，所以我不能使用计算器。

谢谢

https://jsfiddle.net/ms582u96/

Answer 1

您可以通过添加 CSS

来实现

main {
  height: 100%;
  background-color: deepskyblue;
  position: relative;
}

.map-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

在 css/bootstrap 中填充最大高度

Fill maximal height in css/bootstrap

css

bootstrap-4

height