调整大小时，Bootstrap 4容器流体的高度不会扩展到视口

Question

我有一个导航选项卡部分来容纳一些图像，并且不同部分将具有不同的图像。

将小提琴的大小调整为较小的大小时，可以看到图像重叠的巨大空白。 我不确定该如何解决...我必须确定删除height-100，但由于它看起来不错，所以我想强制执行该高度。

HTML代码：

<div class="container-fluid bg-dark h-100">
    <div class="row">
      <div class="col-md-8">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
              <a class="nav-link text-danger" data-toggle="tab" href="#tab1" role="tab">tab1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-danger" data-toggle="tab" href="#tab2" role="tab">tab2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-danger" data-toggle="tab" href="#tab3" role="tab">tab3</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-danger" data-toggle="tab" href="#tab4" role="tab">tab4</a>
            </li>
          </ul>

          <!-- Tab panes -->
          <div class="tab-content text-white">
            <div class="tab-pane fade in" id="tab1" role="tabpanel">
              <!--Row 1 start-->
              <div class="row py-2 h-100">
                <div class="col-md-3">
                    <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                </div>
                <div class="col-md-3">
                    <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                </div>
                <div class="col-md-3">
                    <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                </div>
                <div class="col-md-3">
                    <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                </div>
              </div>
              <!--Row 1 end-->
              <!--Row 2 start-->
              <div class="row py-2 h-100">
                  <div class="col-md-3">
                      <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                  </div>
                  <div class="col-md-3">
                      <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                  </div>
                  <div class="col-md-3">
                      <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                  </div>
                  <div class="col-md-3">
                      <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                  </div>
                </div>
                <!--Row 2 end-->
              <!--Row 3 start-->
              <div class="row py-2 h-100">
                  <div class="col-md-3">
                      <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                  </div>
                  <div class="col-md-3">
                      <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                  </div>
                  <div class="col-md-3">
                      <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                  </div>
                  <div class="col-md-3">
                      <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                  </div>
                </div>
                <!--Row 3 end-->
            </div>
            <div class="tab-pane fade in" id="tab2" role="tabpanel">
             x
            </div>
            <div class="tab-pane fade in " id="tab3" role="tabpanel">
             x
            </div>
            <div class="tab-pane fade in" id="tab4" role="tabpanel">
              x
            </div>
          </div>
      </div>
      <div class="col-md-4 control">
        <div class="container-fluid">
        some content here
      </div>
      </div>
    </div>
  </div>

CSS：

html, body {
    box-sizing: border-box;
    height: 100%;
    margin: 0;
  }
.control{
    background-color:#24262D;
}

这是JSFiddle（带有B4和CSS）： https ://jsfiddle.net/yeg1dsut/9/

谢谢！

Answer 1

而不是使用h-100 （高度：100％），而应使用最小高度...

.container-fluid {
  min-height: 100%;
}