Vertical flexbox

Header sized to content, with fixed footer, and content region that fills the remaining space.

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="p-3 mb-3">
  <ul class="list-group">
    <li class="list-group-item rounded-0">Cras justo odio</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item rounded-0">Vestibulum at eros</li>
  </ul>
</div>

<div class="p-3 mb-3">
  <ul class="list-group">
    <li class="list-group-item my-rounded-0">Cras justo odio</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item my-rounded-0">Vestibulum at eros</li>
  </ul>
</div>

SCSS

body {
  background: #90a4ae;
}

.my-rounded-0 {
  border-radius: 0 !important;
}