Flex标题，内容，页脚布局

Question

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

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

我怎样才能做到这一点？

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;