Как получить 100% высоту и ширину панели вкладок с помощью начальной загрузки 4.3

Question

Я использую загрузчик 4.3. У начальной загрузки 4.3 есть размер классы m-* и w-*, чтобы установить высоту и ширину элемента. Мне удалось установить высоту и ширину контейнера на 100%, и теперь я пытаюсь установить высоту и ширину панели вкладок на 100%.

JSFiddle

    <div class="container-fluid w-highlight-container h-100 d-flex flex-column">        
        <main role="main" class="pb-3">      

     <ul class="nav nav-tabs mt-3">
        <li class="nav-item">
          <a class="nav-link active" href="#w-tab1" data-toggle="tab" role="tab">Tab1</a>
        </li>
       <li class="nav-item">
         <a class="nav-link" href="#w-tab2" data-toggle="tab" role="tab">Tab2</a>
       </li>      
    </ul>
    <div class="tab-content">
    <div id="w-tab1" class="tab-pane fade active show" role="tabpanel">        
        <div class="row">
            <div class="col-md-12">
                <div class="w-tab1 h-100 w-100">
                  requires 100% height and 100% width of view port
                </div>
            </div>
        </div>
    </div>
    <div id="w-tab2" class="tab-pane fade" role="tabpanel">
         <div class="row">
            <div class="col-md-12">
                <div class="w-tab2 h-100 w-100">
                  requires 100% height and 100% width of view port
                </div>
            </div>
        </div>
    </div>    
    </div>
</main>
    </div>
   <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2019 - UI - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>

Answer 1

w-100 и h-100 делают там работу, как предполагалось, просто родительский контейнер не растягивается на 100% из стороны в сторону ... поэтому мы начинаем с tab-content и затем обеспечиваем ширину 100%и высота учитывается ... вплоть до нашего соответствующего div, который уже имеет классы w-100 и h-100.

рабочий фрагмент кода ниже:

.w-tab1 {
  border: solid 2px black;
  background-color: green;
}

.w-tab2 {
  border: solid 2px black;
  background-color: red;
}

.w-highlight-container {
  border: solid 2px black;
  background-color: #ffd;
}

html,
body {
  height: 100%;
}

.tab-content {
  height: calc(100vh - (75px)) !important;
  width: calc(100vw - (40px)) !important
}

.tab-content>.active {
  display: inline-flex;
  height: 100%;
  width: 100%
}

.tab-content>.active>.row {
  display: contents
}

.tab-content>.active>.row>div {
  padding-left: 0;
  width: 100%;
  display: contents;
}

.tab-content>.active>.row>div>.w-100 {
  width: 99% !important
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="container-fluid w-highlight-container h-100 d-flex flex-column">
  <main role="main" class="pb-3">

    <ul class="nav nav-tabs mt-3">
      <li class="nav-item">
        <a class="nav-link active" href="#w-tab1" data-toggle="tab" role="tab">Tab1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#w-tab2" data-toggle="tab" role="tab">Tab2</a>
      </li>
    </ul>
    <div class="tab-content">
      <div id="w-tab1" class="tab-pane fade active show" role="tabpanel">
        <div class="row">
          <div class="col-md-12">
            <div class="w-tab1 h-100 w-100">
              requires 100% height and 100% width
            </div>
          </div>
        </div>
      </div>
      <div id="w-tab2" class="tab-pane fade" role="tabpanel">
        <div class="row">
          <div class="col-md-12">
            <div class="w-tab2 h-100 w-100">
              requires 100% height and 100% width
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>
<footer class="border-top footer text-muted">
  <div class="container">
    &copy; 2019 - UI - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
  </div>
</footer>