css - 在容器内用 flexbox 填充高度

Question

我正在开发一个 Intranet，我希望内容垂直和水平居中。

我有一个这样的网站:

<div class="container">
  <!-- NAVBAR MENU -->
</div>
<!-- COULD BE container-fluid SOMETIMES -->
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <!-- TITLE WITH A DROPDOWN BUTTON -->
      <h2>
          TITLE 
          <span class="pull-right">
             <button>BUTTON</button>
          </span>
        </h2>
    </div>
  </div>
  <!-- CONTENT -->
</div>
<div class="container">
  <!-- FOOTER -->
</div>

Content 总是 body 的第二个子元素，在带有 container 或 container-fluid 的 div 中，后跟带有下拉菜单的标题按钮上的菜单。

重要的是要知道，我的页脚是静态的，它的高度是 60 像素。

我试图在我的第二个容器中添加一个 flexbox，在标题部分之后，它填充了所有剩余高度。这样，只有纯内容会居中。

不幸的是，我无法做到这一点。

我尝试将我的 body 设置为 flexbox 并手动设置他的所有子项:我的页脚每次都会隐藏我的页面末尾。

我尝试以最简单的方式设置单个 flexbox，它不会填充缺失的高度。

html 和 body 得到了 min-height: 100%;。 align-items & justify-content 已设置。

此外，我注意到，如果我将 html 设置为 height:100%;，它每次都会显示滚动条，但是单个 flexbox 将获得完整的缺失高度但不会居中(并且仍然有这个页脚问题)。

我可能漏掉了什么或者做错了什么......

感谢您的帮助!

Answer 1

感谢@RicardoRuiz 的回答。

它最终看起来像下面的片段。

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.row,
.content,
.container {
  border: 3px solid;
  padding: 1em;
}
.container:first-child {
  border-color: green;
  height: 60px;
}
.container:nth-child(2) {
  border-color: blue;
  display: flex;
  flex-direction: column;
  height: calc(100vh-160px);
}
.container:last-child {
  position: fixed;
  bottom: 0;
  width: 100%;
  border-color: red;
  height: 60px;
}
.row {
  border-color: yellow;
}
.content {
  border-color: dodgerblue;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-basis: 100%;
  padding-bottom: 60px;
}

<div class="container">
  NAVBAR
</div>
<!-- COULD BE container-fluid SOMETIMES -->
<div class="container">
  <div class="row">
    <!-- TITLE WITH A DROPDOWN BUTTON -->
    <h2>
          TITLE 
          <span class="pull-right">
             <button>BUTTON</button>
          </span>
        </h2>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dui sem, lacinia ac dictum ut, condimentum sit amet massa. Duis vel justo ac diam bibendum gravida vitae quis eros. Nam suscipit tellus in eros varius ullamcorper sed quis nulla. Mauris
      pharetra justo in lectus tincidunt, quis condimentum leo faucibus. Fusce quis magna laoreet, posuere metus in, scelerisque ipsum. Suspendisse potenti. Aenean eu elit et diam pellentesque mattis. Nulla facilisi. Cras scelerisque tortor dignissim
      lacus fringilla porta. Aliquam sagittis sit amet libero et ultrices. Praesent aliquet purus et ultrices semper. Integer sed lorem in augue volutpat convallis quis vel tellus. Duis venenatis orci id odio vehicula, eget feugiat lorem aliquam. Vivamus
      at tempus magna, mattis consequat sem. Aliquam porta sem vitae diam mollis, ut fringilla velit lacinia. Fusce ac suscipit elit. Proin lectus mauris, viverra sed lobortis at, ultrices vel ipsum. Cras non molestie diam. Donec lobortis lobortis magna,
      eget placerat mi tincidunt at. Quisque eget odio mauris. Nam eu tellus vitae nisl ornare finibus. Proin et enim aliquet, iaculis quam eleifend, mollis neque. Aenean auctor accumsan fermentum. Nam eget magna vehicula, tincidunt odio ut, vehicula
      arcu. Nulla sit amet turpis lacus. Sed iaculis, velit ac hendrerit imperdiet, ante lectus malesuada felis, quis tempus nibh nisl at dui. Aliquam laoreet accumsan varius. Vestibulum vel quam arcu. Praesent id semper eros, quis mollis dui. Etiam at
      sagittis lectus. Suspendisse in nisi bibendum nisl scelerisque pulvinar. Maecenas nec scelerisque augue. Donec elementum consequat tempor. Sed porta viverra diam, non pellentesque odio scelerisque id. Vestibulum mollis nibh ut tellus pretium auctor.
      Aliquam erat volutpat. In sit amet nibh lobortis, maximus arcu eget, accumsan mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec non dolor sed dolor aliquet suscipit ut at quam. Ut dictum tellus in
      dui consectetur, eu egestas lacus sodales. Duis a luctus tellus, at efficitur magna. Quisque eleifend risus sit amet ipsum rhoncus egestas. In mauris lorem, ullamcorper quis laoreet sed, tempus vitae lectus. Integer neque leo, molestie ac aliquam
      id, lacinia et ligula. Pellentesque sagittis eleifend facilisis. Fusce nisl purus, elementum non urna in, egestas lacinia justo. Nunc libero dolor, vestibulum at tortor at, pellentesque vehicula mauris.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dui sem, lacinia ac dictum ut, condimentum sit amet massa. Duis vel justo ac diam bibendum gravida vitae quis eros. Nam suscipit tellus in eros varius ullamcorper sed quis nulla. Mauris
      pharetra justo in lectus tincidunt, quis condimentum leo faucibus. Fusce quis magna laoreet, posuere metus in, scelerisque ipsum. Suspendisse potenti. Aenean eu elit et diam pellentesque mattis. Donec lobortis lobortis magna, eget placerat mi tincidunt
      at. Quisque eget odio mauris. Nam eu tellus vitae nisl ornare finibus. Proin et enim aliquet, iaculis quam eleifend, mollis neque. Aenean auctor accumsan fermentum. Nam eget magna vehicula, tincidunt odio ut, vehicula arcu. Nulla sit amet turpis
      lacus. Sed iaculis, velit ac hendrerit imperdiet, ante lectus malesuada felis, quis tempus nibh nisl at dui. Aliquam laoreet accumsan varius. Vestibulum vel quam arcu. Praesent id semper eros, quis mollis dui. Etiam at sagittis lectus. Suspendisse
      in nisi bibendum nisl scelerisque pulvinar. Maecenas nec scelerisque augue. Donec elementum consequat tempor. Sed porta viverra diam, non pellentesque odio scelerisque id. Vestibulum mollis nibh ut tellus pretium auctor. Aliquam erat volutpat. In
      sit amet nibh lobortis, maximus arcu eget, accumsan mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec non dolor sed dolor aliquet suscipit ut at quam. Ut dictum tellus in dui consectetur, eu egestas
      lacus sodales. Duis a luctus tellus, at efficitur magna. Quisque eleifend risus sit amet ipsum rhoncus egestas. In mauris lorem, ullamcorper quis laoreet sed, tempus vitae lectus. Integer neque leo, molestie ac aliquam id, lacinia et ligula. Pellentesque
      sagittis eleifend facilisis. Fusce nisl purus, elementum non urna in, egestas lacinia justo. Nunc libero dolor, vestibulum at tortor at, pellentesque vehicula mauris.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dui sem, lacinia ac dictum ut, condimentum sit amet massa. Duis vel justo ac diam bibendum gravida vitae quis eros. Nam suscipit tellus in eros varius ullamcorper sed quis nulla. Mauris
      pharetra justo in lectus tincidunt, quis condimentum leo faucibus. Fusce quis magna laoreet, posuere metus in, scelerisque ipsum. Suspendisse potenti. Aenean eu elit et diam pellentesque mattis. Donec lobortis lobortis magna, eget placerat mi tincidunt
      at. Quisque eget odio mauris. Nam eu tellus vitae nisl ornare finibus. Proin et enim aliquet, iaculis quam eleifend, mollis neque. Aenean auctor accumsan fermentum. Nam eget magna vehicula, tincidunt odio ut, vehicula arcu. Nulla sit amet turpis
      lacus. Sed iaculis, velit ac hendrerit imperdiet, ante lectus malesuada felis, quis tempus nibh nisl at dui. Aliquam laoreet accumsan varius. Vestibulum vel quam arcu. Praesent id semper eros, quis mollis dui. Etiam at sagittis lectus. Suspendisse
      in nisi bibendum nisl scelerisque pulvinar. Maecenas nec scelerisque augue. Donec elementum consequat tempor. Sed porta viverra diam, non pellentesque odio scelerisque id. Vestibulum mollis nibh ut tellus pretium auctor. Aliquam erat volutpat. In
      sit amet nibh lobortis, maximus arcu eget, accumsan mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec non dolor sed dolor aliquet suscipit ut at quam. Ut dictum tellus in dui consectetur, eu egestas
      lacus sodales. Duis a luctus tellus, at efficitur magna. Quisque eleifend risus sit amet ipsum rhoncus egestas. In mauris lorem, ullamcorper quis laoreet sed, tempus vitae lectus. Integer neque leo, molestie ac aliquam id, lacinia et ligula. Pellentesque
      sagittis eleifend facilisis. Fusce nisl purus, elementum non urna in, egestas lacinia justo. Nunc libero dolor, vestibulum at tortor at, pellentesque vehicula mauris.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dui sem, lacinia ac dictum ut, condimentum sit amet massa. Duis vel justo ac diam bibendum gravida vitae quis eros. Nam suscipit tellus in eros varius ullamcorper sed quis nulla. Mauris
      pharetra justo in lectus tincidunt, quis condimentum leo faucibus. Fusce quis magna laoreet, posuere metus in, scelerisque ipsum. Suspendisse potenti. Aenean eu elit et diam pellentesque mattis.</p>
  </div>
</div>
<div class="container">
  <footer>FOOTER</footer>
</div>