Flex 页眉、内容、页脚布局

Question

在下面的代码中，我希望内容部分填充到页脚到达屏幕底部的位置。

编辑：也许我应该更清楚中心对齐。页眉和页脚要垂直对齐，三个项目都需要从左垂直线开始，如下所示：

我怎样才能做到这一点？

html, body {
  margin: 0;
  padding: 0;
}

container{
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  width: 100%;
}

header {
    height: 92px;
    background-color: #FFFFFF;
    border: 1px solid #DCE5EB;
}

footer {
    height: 92px;
    border: 1px solid #DCE5EB;
    background-color: #FFFFFF;
}

.content {
    height: 700px;
    flex: auto;
    background-color: #FFFFFF;
}

<div class="container">
  <header>Header</header>
  <div class"content">Content</div>
  <footer>Footer</footer>
</div>

Answer 1

您忘记在您的班级content 中添加=。 这是一个简单的错字。

对于您的内容。因为你有header 和footer 的静态高度。 您可以为您的内容提供100vh 的高度，并降低header 和footer 的高度，另外不要忘记考虑border 即2px 总计。 它会解决你的问题。

编辑：可以通过将line-height 等于height 来实现垂直对齐。 并将其与您的边距对齐。您可以使用margin 或padding，具体取决于您的要求。 或者你甚至可以使用

display:flex;
align-items:center;

从您的内容中删除 94px + 94px

html,
body {
  margin: 0;
  padding: 0;
}

container {
  display: flex;
  flex-direction: column;
  top: 0;
  border: 10px solid black;
}

header {
  display: flex;
  align-items: center;
  height: 92px;
  background-color: #FFFFFF;
  border: 1px solid #DCE5EB;
  padding: 0 30px;
}

footer {
  height: 92px;
  display: flex;
  border: 1px solid #DCE5EB;
  background-color: #FFFFFF;
  align-items: center;
  padding: 0 30px;
}

.content {
  min-height: calc(100vh - 94px - 94px);
  background-color: #FFFFFF;
  padding: 0 30px;
}

<div class="container">
  <header>Header</header>
  <div class="content">Content</div>
  <footer>Footer</footer>
</div>

Answer 2

除了 flexbox，您还可以使用 CSS Grid 创建此布局。

fiddle

html,
body {
  margin: 0;
  height: 100%;
}

.container {
  display: grid;
  grid-template-rows: 92px 1fr 92px;
  height: 100%;
}

header,
footer {
  display: flex;
  align-items: center;
  border: 1px solid #DCE5EB;
}

.content {
  overflow: auto;
}

<div class="container">
  <header>Header</header>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!</div>
  <footer>Footer</footer>
</div>