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

В дополнение к flexbox вы также можете создать этот макет с помощью CSS Grid.

скрипка

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>

Answer 2

Вы забыли добавить = в вашем классе 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>