html - Bootstrap 列不会填充剩余高度

Question

我的内容只有几行长，但我希望页面继续保持剩余的高度。

<div style="background: #e0e0e0;">
  <main role="main" class="container">
    <div class="row" style="background: #f9f9f9;">
      <div class="col mb-3">
        <h1 class="display-4 mt-5">{{object.name}}</h1>


        <p>City: New York</p>

        <div class="row mt-5">

          <table class="table">
            <thead>
              <tr>
                <th scope="col">Year</th>
                <th scope="col">Show</th>
              </tr>
            </thead>
            <tbody>
              {% for show in shows %}
              <tr>
                <th scope="row">2019</th>
                <td>Test Title</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>

        </div>
      </div>
    </div>
  </main>
</div>

标签： htmlcsstwitter-bootstrapbootstrap-4

Answer 1

尝试在 Css min-height: 100vh 中指定<main>标签和 <div style="background: #e0e0e0;"></div>标签