尝试创建基于flex的页眉，内容和页脚布局

Question

我试图实现这种布局。细线必须在其中包含所有三个部分。页眉和页脚需要垂直居中。并且内容应该占据高度，直到页脚到达视口的底部。请注意，细线仅用于显示边界......它们实际上不应该在代码中。

到目前为止工作：

＆＃13;

＆＃13;

.wrapper{
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: pink;
}

header, footer, .content{
  border: 1px solid black;
}

header, footer {
  flex: 0 0 92px;
}

.content{
  flex: 1;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用align-items属性在页眉和页脚内部进行垂直对齐

＆＃13;

＆＃13;

.wrapper{
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin-left: 10%;
  margin-right: 10%;
  background-color: pink;
}

header, footer, .content{
  border: 1px solid black;
}

header, footer {
  flex: 0 0 92px;
  display: flex;
  align-items: center;
}

.content{
  flex: 1;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

为标题，内容和页脚提供边距和/或宽度，并将它们与父级的中心对齐

• 为标题，内容和页脚的主容器添加了嵌套元素。
• 将页眉，内容和页脚容器的宽度保持为100％并为其提供底部边框
• 为内部div添加了一个宽度，并将它们对齐在各自父母的中心

.wrapper{
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: pink;
  align-items: center;
}



header, footer, .content{
  margin: auto;
  border-bottom: 1px solid black;
  width:100%;
}

header .section,footer .section, .content .section{
  height:100%;
  width:80%;
  margin:auto;
  background-color:red
}

header, footer {
  flex: 0 0 92px;
}

.content{
  flex: 1;
}

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