Div 不适合可用空间答案

【问题标题】：Div is not fitting the space availableDiv 不适合可用空间
【发布时间】：2022-02-09 00:01:24
【问题描述】：

我知道这个问题已经被问过了，但是我尝试了一切，但我没有找到解决方案，所以我再次问，我很抱歉:-)。

我试图让我的行填满页面的所有剩余屏幕空间，但是，我的行从未缩小，它保持在他的初始大小。

请注意，我的地图适合 div 的大小。

这是我正在使用的代码：

<div class="row">
  <div class="col-xl-12 col-md-12 mb-12 col-lg-12 ">
    <div class="card shadow mb-4 h-100">

      <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-bold text-primary">
          Carte des balises
        </h6>
      </div>

      <div class="card-body">
        <div id="map"></div>
      </div>

    </div>
  </div>
</div>

还有页面的渲染：

如果有人能给我一些线索，我将不胜感激！

提前致谢，:)

【问题讨论】：

在地图元素上设置height，或者添加aspect-ratio等
您好，感谢您的回答。我尝试将其设置为 height: 100% 并尝试使用 height: 100vh;但我不工作..
如果我们没有看到所有页面，很难判断您必须做什么。据我所知，请确保容器（您提供的.row）具有所需的高度。如果没有，那么您应该使其扩展（通过在父级上使用 flex 并将 flex-grow: 1 添加到容器中，或者仅设置固定高度 - 使用或不使用 calc）。下一步是对地图容器做同样的事情。将display: flex 添加到父级并将flex: 1 添加到地图容器是使地图在可用空间中扩展的一种健康方式

标签： javascript html css twitter-bootstrap bootstrap-4

【解决方案1】：

<div class="card shadow mb-4 h-100">

这里的 h-100 类表示其父元素和父元素的高度为 100%

<div class="col-xl-12 col-md-12 mb-12 col-lg-12 ">

没有高度设置。此外，html 中的所有块标签元素都没有开箱即用定义的高度，而是取决于它的子元素。

所以你需要做的是在父节点上设置一个高度，例如：

在 HTML 中：添加一个类

<div class="col-xl-12 col-md-12 mb-12 col-lg-12 map-height">

CSS：定义类如下

.map-height{
   min-height:calc( 100vh - 300px )
}

这里 300 像素是硬编码的，但您需要计算页眉高度 + 具有 4 个大标签的部分高度 + 页脚高度假设这 3 个部分具有静态高度设置。

【讨论】：