Растяжка div с классом строк до низа с помощью Bootstrap 4

Question

Я использую вкладки из начальной загрузки на своей странице, и я хочу сделать высоту содержимого вкладки до того, что осталось (чтобы растянуть ее до дна). У меня есть заголовок и ниже заголовка вкладки. Заголовок в моем случае может быть на разной высоте. По этой причине я не использую в CSS для содержимого вкладок некоторые функции, такие как «calc». Я хотел бы решить это как-нибудь с высотой: 100%, если это возможно. Вот код, который я пробовал до сих пор. Когда я использую h-100, который в основном для CSS height: 100, появляется полоса прокрутки, а это не то, что я хочу.

Вот мой код:

html,
body {
  height: 100%;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid h-100">
  <div class="row bg-primary">
    <div class="col">
      <p>Here is going to be some content. Height of this content is auto it can change based on what it has inside.</p>
      <p>For instance two paragraphs.</p>
    </div>
  </div>
  <div class="row mt-2 bg-warning h-100">
    <div class="col h-100">
      <div class="nav nav-tabs" id="nav-tab" role="tablist">
        <a class="nav-item nav-link active" id="tab1-nav" data-toggle="tab" href="#tab1" role="tab" aria-controls="nav-tab1" aria-selected="true">Tab 1</a>
        <a class="nav-item nav-link" id="tab2-nav" data-toggle="tab" href="#tab2" role="tab" aria-controls="nav-tab2" aria-selected="false">Tab 2</a>
      </div>
      <div class="tab-content h-100 border border-top-0 mb-2 p-2" id="nav-tabContent">
        <div class="tab-pane show active" id="tab1" role="tabpanel" aria-labelledby="nav-tab1">
          <div class="row h-100">
            <div class="col">
              Content 1
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="nav-tab2">
          <div class="row">
            <div class="col">
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

В основном это был ответ перед .Вы бы использовали flexbox flex-column flex-grow-1 (или flex-fill) служебные классы .

<div class="container-fluid min-vh-100 d-flex flex-column">
    <div class="row bg-primary">
        <div class="col">
            <p>Here is going to be some content. Height of this content is auto it can change based on what it has inside.</p>
            <p>For instance two paragraphs.</p>
        </div>
    </div>
    <div class="row mt-2 bg-warning d-flex flex-column flex-grow-1">
        <div class="col h-100 d-flex flex-column">
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="tab1-nav" data-toggle="tab" href="#tab1" role="tab" aria-controls="nav-tab1" aria-selected="true">Tab 1</a>
                <a class="nav-item nav-link" id="tab2-nav" data-toggle="tab" href="#tab2" role="tab" aria-controls="nav-tab2" aria-selected="false">Tab 2</a>
            </div>
            <div class="tab-content flex-grow-1 border border-top-0 mb-2 p-2" id="nav-tabContent">
                <div class="tab-pane h-100 show active" id="tab1" role="tabpanel" aria-labelledby="nav-tab1">
                    <div class="row h-100">
                        <div class="col">
                            Content 1
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="nav-tab2">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>

Демо: https://www.codeply.com/go/rMXJcFPAoh

Обратите внимание, как вы можетеиспользуйте min-vh-100 на контейнере, без необходимости height:100% на html,body.

Также см .: Bootstrap 4: Как заставить ряд растянуть оставшуюся высоту?