How do I make my panel to fill the screen down to the footer?

Question

I want my panel to take up all the screen until the footer even if the panel is empty. If the panel is filled I want to scroll to see the content, but the footer should always b

Answer 1

Bootstrap has removed all the variants of *-xs-* classes. Instead of, col-xs-12, use col-12. Since the column is 100% for all sizes, it is enough to use col-12.

---

1. Use d-flex flex-column h-100 for the parent of the row.
2. Use flex-grow-1 for the row.
3. All the parents of row must have 100% height including body and html.
4. col-12 and panel must have 100% height.
5. Use a row for the footer.
6. Do not change position of footer: remove 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>

You can use container instead of container-fluid. It does not make any difference. Buy if you do so,remove the container that is in the footer.

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>