Как мне сделать панель, чтобы заполнить экран до нижнего колонтитула?

Question

Я хочу, чтобы моя панель занимала весь экран до нижнего колонтитула, даже если панель пуста.Если панель заполнена, я хочу прокрутить, чтобы увидеть содержимое, но нижний колонтитул всегда должен быть виден внизу страницы.У тебя есть идея?Вот код:

.list_mobile .footer {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 60px;
  background: lightskyblue;
  color: darkred;
}

<div class="row">
  <div class="col-xs-12 col-sm-12 col-lg-12 mg-tp-xs">
    <div class="panel panel-danger" style="overflow :scroll">
      <div class="panel-heading">
        <h4 class="panel-title">
          <span>Result</span>
        </h4>
      </div>
      <div class="panel-collapse">
        <div class="panel-body">
          <p>test</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="list_mobile">
  <footer class="footer">
    <div class="container">
      <h4>number of results : 55 </h4>
    </div>
  </footer>
</div>

Answer 1

Bootstrap удалил все варианты *-xs-* классов.Вместо col-xs-12 используйте col-12.Поскольку для всех размеров столбец равен 100%, достаточно использовать col-12.

---

1. Использовать d-flex flex-column h-100 для родительского элемента строки.
2. Используйте flex-grow-1 для строки.
3. Все родители строки должны иметь 100% рост, включая тело и HTML.
4. col-12 и panel должны иметь 100% высоту.
5. Используйте row для нижнего колонтитула.
6. Не изменять положение footer: удалить position: absolute; bottom: 0;right: 0;

html,
body {
  height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid d-flex flex-column h-100 bg-primary">
  <div class="row flex-grow-1">
    <div class="col-12  bg-danger h-100">
      <div class="panel panel-danger h-100">
        <div class="panel-heading">
          <h4 class="panel-title">
            <span>Result</span>
          </h4>
        </div>
        <div class="panel-collapse">
          <div class="panel-body">
            <p>test</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <footer class="col-12 footer">
      <div class="container">
        <h4>number of results : 55 </h4>
      </div>
    </footer>
  </div>
</div>

Вы можете использовать container вместо container-fluid.Это не имеет никакого значения.Купите, если вы это сделаете, удалите контейнер, который находится в нижней части.

html,
body {
  height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container d-flex flex-column h-100 bg-primary">
  <div class="row flex-grow-1">
    <div class="col-12  bg-danger h-100">
      <div class="panel panel-danger h-100">
        <div class="panel-heading">
          <h4 class="panel-title">
            <span>Result</span>
          </h4>
        </div>
        <div class="panel-collapse">
          <div class="panel-body">
            <p>test</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <footer class="col-12 footer">
        <h4>number of results : 55 </h4>
    </footer>
  </div>
</div>