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>

Answer 1

Попробуйте указать в Css min-height: 100vh для тега <main> и тега <div style="background: #e0e0e0;"></div>

Answer 2

используйте минимальную высоту и максимальную высоту

.row{
min-height: 450px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>