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

Question

Я делаю мобильное веб-приложение, в котором пользователь мог бы купить мясо и выбрать, сколько, и я хотел бы сделать складной стол, который будет закреплен внизу. Приведенный ниже код работает отлично, пока я не добавлю больше элементов, кнопка свертывания не будет нажата из-за большой таблицы.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<footer class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#tablecol">
        <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="tablecol">
    <div class="table-responsive bg-light" id="table">
      <table class="table table-hover">
        <thead>
          <tr>
            <th>Product</th>
            <th>Amount</th>
            <th>Cost</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Meat</td>
            <td>2 kg</td>
            <td>100 kr</td>
            <td>&times;</td>
          </tr>
          <tr>
            <td>Cheese</td>
            <td>1 kg</td>
            <td>200 kr</td>
            <td>&times;</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</footer>

Я пытался применить max-height для нижнего колонтитула, но это не сработало. Как применить max-height к разборному контенту и сделать его прокручиваемым?

Answer 1

Вы можете переполнить контейнер (#table) и применить max-height. По желанию можно исправить thead.

#table {
  overflow-y: auto;
  max-height: 200px;
}

th {
  position: sticky;
  top: 0;
  background: white;
  z-index: 5;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<footer class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#tablecol">
            <span class="navbar-toggler-icon"></span>
        </button>
  <div class="collapse navbar-collapse" id="tablecol">
    <div class="table-responsive bg-light" id="table">
      <table class="table table-hover">
        <thead>
          <tr>
            <th>Product</th>
            <th>Amount</th>
            <th>Cost</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Meat</td>
            <td>2 kg</td>
            <td>100 kr</td>
            <td>&times;</td>
          </tr>
          <tr>
            <td>Cheese</td>
            <td>1 kg</td>
            <td>200 kr</td>
            <td>&times;</td>
          </tr>
          <tr>
            <td>Cheese</td>
            <td>1 kg</td>
            <td>200 kr</td>
            <td>&times;</td>
          </tr>
          <tr>
            <td>Cheese</td>
            <td>1 kg</td>
            <td>200 kr</td>
            <td>&times;</td>
          </tr>
          <tr>
            <td>Cheese</td>
            <td>1 kg</td>
            <td>200 kr</td>
            <td>&times;</td>
          </tr>
          <tr>
            <td>Cheese</td>
            <td>1 kg</td>
            <td>200 kr</td>
            <td>&times;</td>
          </tr>
          <tr>
            <td>Cheese</td>
            <td>1 kg</td>
            <td>200 kr</td>
            <td>&times;</td>
          </tr>
          <tr>
            <td>Cheese</td>
            <td>1 kg</td>
            <td>200 kr</td>
            <td>&times;</td>
          </tr>
          <tr>
            <td>Cheese</td>
            <td>1 kg</td>
            <td>200 kr</td>
            <td>&times;</td>
          </tr>
          <tr>
            <td>Cheese</td>
            <td>1 kg</td>
            <td>200 kr</td>
            <td>&times;</td>
          </tr>
          <tr>
            <td>Cheese</td>
            <td>1 kg</td>
            <td>200 kr</td>
            <td>&times;</td>
          </tr>
          <tr>
            <td>Cheese</td>
            <td>1 kg</td>
            <td>200 kr</td>
            <td>&times;</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</footer>