Bootstrap 4 container-fluid height does not expand to viewport when resized smaller

Question

I have a nav-tab section to house some images and there will be different images for different sections.

When you resize the fiddle to a smaller size, you can see the huge white space that the images overlap. I'm unsure as to how I can fix this... I have to surely remove height-100, but I want to enforce the height as it'd look nice.

HTML CODE:

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

Here is the JSFiddle (With B4 and CSS): https://jsfiddle.net/yeg1dsut/9/

Thank you!

Answer 1

Instead of using h-100 (height:100%), you should use min height...

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