如何通过引导程序使卡片粘在页面底部？

Question

我有一个正在工作的项目的Codepen here，并且UI出现问题。我需要底部的容器来填充视口中的剩余空间。除非在编辑空间的右/左，否则很难在Codepen上查看它。它需要保持在第一行的下方，但绝对不要超出页面的高度（应用程序应该在一页上都可以看到）。我尝试了flex-grow和flex-shrink，但是它们似乎都没有作用。这是最底行（为简洁起见，没有很多列表项）。

  <div class="row flex-shrink-1" style="margin-right: 0px;margin-left: 0px;width: 100%;min-width: 100%;margin-top: 10px;margin-bottom: 0px;">
    <div class="col-auto col-md-6 flex-fill" style="max-width: auto;padding-right: 5px;padding-left: 10px;">
      <div class="card d-flex flex-grow-1 flex-fill" style="min-height: 100%;height: 100%;">
        <div class="card-header" style="background-color: rgba(0,0,0,0);padding: 5px;">
          <nav class="navbar navbar-light navbar-expand-md border-white border rounded navigation-clean-search" style="background-color: rgba(0,0,0,0.03);padding: 5px;">
            <div class="container"><a class="navbar-brand" href="#" style="margin: 0px;padding: 0px;">Lorem Ipsum</a></div>
          </nav>
        </div>
        <div class="card-body" style="max-height: auto;padding: 5px;">
          <ul class="list-group text-truncate" style="min-height: 100%;height: 100%;">
            <li class="list-group-item" style="margin: 3px 3px;">
              <div class="row">
                <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

.list-group.text-truncate {
  overflow-y: scroll;
}

.navigation-clean-search {
  background: #fff;
  padding-top: .75rem;
  padding-bottom: .75rem;
  color: #333;
  border-radius: 0;
  box-shadow: none;
  border: none;
  margin-bottom: 0;
}

@media (min-width:768px) {
  .navigation-clean-search {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

.navigation-clean-search .navbar-brand {
  font-weight: bold;
  color: inherit;
}

.navigation-clean-search .navbar-brand:hover {
  color: #222;
}

.navigation-clean-search .navbar-toggler {
  border-color: #ddd;
}

.navigation-clean-search .navbar-toggler:hover,
.navigation-clean-search .navbar-toggler:focus {
  background: none;
}

.navigation-clean-search .navbar-toggler {
  color: #888;
}

.navigation-clean-search .navbar-collapse,
.navigation-clean-search .form-inline {
  border-top-color: #ddd;
}

.navigation-clean-search .navbar-nav a.active,
.navigation-clean-search .navbar-nav>.show>a {
  background: none;
  box-shadow: none;
}

.navigation-clean-search.navbar-light .navbar-nav a.active,
.navigation-clean-search.navbar-light .navbar-nav a.active:focus,
.navigation-clean-search.navbar-light .navbar-nav a.active:hover {
  color: #8f8f8f;
  box-shadow: none;
  background: none;
  pointer-events: none;
}

.navigation-clean-search.navbar .navbar-nav .nav-link {
  padding-left: 18px;
  padding-right: 18px;
}

.navigation-clean-search.navbar-light .navbar-nav .nav-link {
  color: #465765;
}

.navigation-clean-search.navbar-light .navbar-nav .nav-link:focus,
.navigation-clean-search.navbar-light .navbar-nav .nav-link:hover {
  color: #37434d !important;
  background-color: transparent;
}

.navigation-clean-search .action-button,
.navigation-clean-button .action-button:active {
  background: #56c6c6;
  border-radius: 20px;
  font-size: inherit;
  color: #fff !important;
  box-shadow: none;
  border: none;
  text-shadow: none;
  padding: 8px 20px;
  transition: background-color 0.25s;
}

.navigation-clean-search .action-button:hover,
.navigation-clean-search .action-button:focus {
  background: #66d7d7;
}

.navigation-clean-search .form-inline label {
  color: #ccc;
}

.navigation-clean-search .form-inline .search-field {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  color: #ccc;
  box-shadow: none;
  color: inherit;
  transition: border-bottom-color 0.3s;
}

@media (max-width:767px) {
  .navigation-clean-search .form-inline .search-field {
    display: inline-block;
    width: 80%;
  }
}

.navigation-clean-search .form-inline .search-field:focus {
  border-bottom: 1px solid #ccc;
}

<!DOCTYPE html>
<html style="height: 100%;max-height: 100%;">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <title>Lorem Ipsum</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="assets/css/Navigation-with-Search.css">
  <link rel="stylesheet" href="assets/css/styles.css">
</head>

<body style="min-height: 100%;max-height: 100%;">
  <nav class="navbar navbar-dark navbar-expand-md bg-primary" style="padding-right: 0px;padding-left: 0px;margin-bottom: 10px;">
    <div class="container-fluid"><a class="navbar-brand" href="#" style="font-weight: bold;">Lorem Ipsum</a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse" id="navcol-1">
        <ul class="nav navbar-nav">
          <li class="nav-item" role="presentation"><a class="nav-link active" href="#">Lorem Ipsum</a></li>
          <li class="nav-item" role="presentation"><a class="nav-link active" href="#">Lorem Ipsum</a></li>
          <li class="nav-item" role="presentation"><a class="nav-link active" href="#">Lorem Ipsum</a></li>
          <li class="nav-item" role="presentation"><a class="nav-link active" href="#">Lorem Ipsum</a></li>
          <li class="nav-item" role="presentation"><a class="nav-link active" href="#">Lorem Ipsum</a></li>
        </ul>
      </div><button class="btn btn-outline-light" type="button" style="padding-right: 12px;">Log In</button></div>
  </nav>
  <div style="max-width: auto;">
    <div class="container" style="min-width: 100%;padding-right: 0px;padding-left: 0px;margin: 0px;width: 100%;">
      <div class="row" style="width: 100%;min-width: 100%;margin: 0px;">
        <div class="col-auto col-md-6 flex-fill" style="max-width: auto;padding-right: 5px;padding-left: 10px;">
          <div class="card d-flex flex-grow-1 flex-fill" style="min-height: 100%;height: 100%;">
            <div class="card-header" style="background-color: rgba(0,0,0,0);padding: 5px;">
              <nav class="navbar navbar-light navbar-expand-md border-white border rounded navigation-clean-search" style="background-color: rgba(0,0,0,0.03);padding: 5px;">
                <div class="container"><a class="navbar-brand" href="#" style="margin-right: 8px;">Lorem Ipsum</a>
                  <div class="collapse navbar-collapse" id="navcol-1">
                    <form class="form-inline ml-auto" target="_self"><i class="fa fa-search ml-auto" style="margin: 0px;"></i>
                      <div class="form-group"><input class="form-control search-field" type="search" id="search-field" name="search" placeholder="Team Number" style="padding-left: 6px;"></div>
                    </form><button class="btn btn-outline-success" type="button" style="margin-left: 8px;">Lorem Ipsum</button></div>
                </div>
              </nav>
            </div>
            <div class="card-body" style="max-height: auto;height: 340px;padding: 5px;">
              <ul class="list-group text-truncate" style="height: 100%;min-height: 100%;">
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-auto col-md-6" style="filter: blur(0px) brightness(100%) hue-rotate(0deg) invert(0%) saturate(100%);max-width: auto;padding-left: 5px;padding-right: 10px;">
          <div class="card">
            <div class="card-body" style="padding: 5px;">
              <div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="https://www.youtube.com/embed/L_jWHffIx5E" allowfullscreen=""></iframe></div>
              <nav class="navbar navbar-light navbar-expand-md border-white border rounded navigation-clean-search" style="background-color: rgba(0,0,0,0.03);padding: 5px;">
                <div class="container"><a class="navbar-brand" href="#" style="margin-right: 8px;">Lorem Ipsum</a>
                  <div class="collapse navbar-collapse" id="navcol-1">
                    <form class="form-inline ml-auto" target="_self">
                      <div class="form-check"><input class="form-check-input" type="checkbox" id="formCheck-1"><label class="form-check-label" for="formCheck-1" style="color: rgb(0,0,0);">Lorem Ipsum</label></div>
                    </form><button class="btn btn-outline-success" type="button" style="margin-left: 16px;">Lorem Ipsum</button></div>
                </div>
              </nav>
            </div>
          </div>
        </div>
      </div>
      <div class="row flex-shrink-1" style="margin-right: 0px;margin-left: 0px;width: 100%;min-width: 100%;margin-top: 10px;margin-bottom: 0px;">
        <div class="col-auto col-md-6 flex-fill" style="max-width: auto;padding-right: 5px;padding-left: 10px;">
          <div class="card d-flex flex-grow-1 flex-fill" style="min-height: 100%;height: 100%;">
            <div class="card-header" style="background-color: rgba(0,0,0,0);padding: 5px;">
              <nav class="navbar navbar-light navbar-expand-md border-white border rounded navigation-clean-search" style="background-color: rgba(0,0,0,0.03);padding: 5px;">
                <div class="container"><a class="navbar-brand" href="#" style="margin: 0px;padding: 0px;">Height of this card should be to bottom of viewport</a></div>
              </nav>
            </div>
            <div class="card-body" style="max-height: auto;padding: 5px;">
              <ul class="list-group text-truncate" style="min-height: 100%;height: 100%;">
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
                <li class="list-group-item" style="margin: 3px 3px;">
                  <div class="row">
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><span>Lorem Ipsum</span></div>
                    <div class="col text-center align-self-center"><button class="btn btn-outline-danger btn-sm" type="button">Lorem Ipsum</button></div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
</body>

</html>

为清楚起见进行编辑： This screenshot显示页面下方的容器还有更多内容，但是由于隐藏了溢出，因此看不到它。它应该只是在容器内溢出并适合屏幕，但事实并非如此。希望对您有所帮助。似乎我必须对max-height做些事情，但是我不确定100％不能正常工作。