Попытка создать гибкий заголовок, контент и нижний колонтитул

Question

Я пытаюсь добиться этого макета. Тонкие линии находятся в пределах, которыми должны быть связаны все три секции. Верхний и нижний колонтитулы должны быть вертикально отцентрированы. И содержимое должно занимать высоту, пока нижний колонтитул не достигнет нижней части области просмотра. Обратите внимание, что тонкие линии предназначены только для обозначения границы ... их не должно быть в коде.

Работа на данный момент:

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

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

Answer 1

Укажите поле и / или ширину верхнего и нижнего колонтитулов, а также выровняйте их по центру родительского элемента

• Добавлен вложенный элемент в основные контейнеры для заголовка, содержимого и нижнего колонтитула.
• Сохраняет ширину контейнеров верхнего и нижнего колонтитула на 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>

Answer 2

Вы можете использовать свойство align-items для выравнивания по вертикали внутри верхнего и нижнего колонтитула

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

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