CSS заголовок и колонтитул не сохраняют свою высоту

Question

В следующем коде мне нужно создать поле с верхним и нижним колонтитулами определенной высоты, центральный div должен быть на высоте 100%.В настоящее время, если я использую flex на #card, высота для верхнего и нижнего колонтитула короче.

Если я удаляю flex css из #card, он работает как положено.

ЯЯ знаю, что удаление flex решит мою проблему, но мне интересно знать, почему это происходит и как я могу это исправить, используя still flex.Спасибо за ваш отзыв.

#card {
  width: 300px;
  height: 400px;
  background-color: grey;
  display:flex;
  flex-direction: column;
}

#header {
  width: 100%;
  height: 50px;
  background-color: red;
}

#content {
  width: 100%;
  height: 100%;
  background-color: yellow;
  overflow:auto;
}

#footer {
  width: 100%;
  height: 100px;
  background-color: blue;
}

<div id="card">
  <div id="header">

  </div>
  <div id="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div id="footer">

  </div>
</div>

Answer 1

Это из-за элемента height в тегах header и footer.

Этот CSS позволит вам использовать display: flex; без изменения header и footer height.Высота 100% работает, когда родитель имеет четко определенную высоту.

#card {
  width: 300px;
  height: 400px;
  background-color: grey;
  display: flex;
  flex-direction: column;
}

#header {
  width: 100%;
  max-height: 50px;
  height: 100%;
  background-color: red;
}

#content {
  width: 100%;
  height: 100%;
  background-color: yellow;
  overflow: auto;
}

#footer {
  width: 100%;
  max-height: 100px;
  height: 100%;
  background-color: blue;
}

<div id="card">
  <div id="header">

  </div>
  <div id="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
    a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
    containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div id="footer">

  </div>
</div>

Answer 2

Работает правильно;Вы устанавливаете его на height: 400px, а высота составляет 400 пикселей (проверьте его).Я думаю, что вы ищете, чтобы заменить height: 400px на height: 100vh, чтобы #card покрыл всю высоту любого экрана.

Answer 3

Удалите height:100% и используйте flex grow:1, а затем измените высоту на минимальную высоту (иногда мне нравится использовать как минимальную, так и максимальную для обеспечения фиксированной высоты)

#card {
  width: 300px;
  height: 400px;
  background-color: grey;
  display: flex;
  flex-direction: column;
}

#header {
  width: 100%;
  min-height: 50px;
  background-color: red;
}

#content {
  width: 100%;
  flex-grow:1
  background-color: yellow;
  overflow: auto;
}

#footer {
  width: 100%;
  min-height: 100px;
  background-color: blue;
}

<div id="card">
  <div id="header">

  </div>
  <div id="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
    a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
    containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div id="footer">

  </div>
</div>

Обновление - устранение гибкого сжатия для комментария @Michael_B

#card {
  width: 300px;
  height: 400px;
  background-color: grey;
  display: flex;
  flex-direction: column;
}

#header {
  width: 100%;
  height: 50px;
  flex-shrink: 0;
  background-color: red;
}

#content {
  width: 100%;
  flex-grow:1
  background-color: yellow;
  overflow: auto;
}

#footer {
  width: 100%;
  height: 100px;
  flex-shrink: 0;
  background-color: blue;
}

<div id="card">
  <div id="header">

  </div>
  <div id="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
    a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
    containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div id="footer">

  </div>
</div>