使用Bootstrap 4将具有行类的div拉伸到底部答案

【问题标题】：Stretching div with row class till bottom with Bootstrap 4使用Bootstrap 4将具有行类的div拉伸到底部
【发布时间】：2019-10-07 02:09:02
【问题描述】：

我在我的页面中使用引导程序中的选项卡，我想将选项卡内容的高度设置为剩下的（将其拉伸到底部）。我有一个标题，标题下方是选项卡。在我的情况下，标题可以处于不同的高度。这就是为什么我不在 CSS 中为选项卡内容使用某些功能（例如“计算”）的原因。我想以某种方式解决它 height: 100% 如果可能的话。这是我到目前为止尝试过的代码。当我使用基本上用于 CSS height:100 的 h-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>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

基本上这是answered before。你可以使用弹性盒子flex-columnflex-grow-1（或flex-fill）utility classes。

<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，而不需要在html,body 上使用height:100%。

另见：Bootstrap 4: How to make the row stretch remaining height?

【讨论】：