Div 不适合 space 可用

Question

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

我试图让我的行填满页面的所有剩余屏幕 space，但是，我的行永远不会缩小，它保持初始大小。

请注意，我的地图适合 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>

还有页面的渲染：

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

提前致谢:)

Answer 1

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

这里的 h-100 class 说取其父元素和父元素的 100% 高度

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

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

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

在HTML中：添加一个class

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

CSS: 定义class如下

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

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

Div 不适合 space 可用

Div is not fitting the space available

html

javascript

css

twitter-bootstrap

bootstrap-4