html - 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

您忘记在您的类(class) 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>