在 css/bootstrap 中填充最大高度答案

【问题标题】：Fill maximal height in css/bootstrap在 css/bootstrap 中填充最大高度
【发布时间】：2018-11-07 02:42:01
【问题描述】：

我怎样才能使地图使用全高？

<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;
}

当我将高度 100% 添加到地图容器时，高度将太高并且滚动条可见。我的页脚高度可变，所以我不能使用 calc。

谢谢

https://jsfiddle.net/ms582u96/

【问题讨论】：

标签： css bootstrap-4 height

【解决方案1】：

您可以通过添加 CSS 来实现这一点

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

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

【讨论】：