Как мне получить этот макет (используя CSS flexbox)?

Question

У меня есть следующая разметка:

<div class="container">
    <div class="strip">
    </div>
    <div class="content">
    </div>
    <div class="footer">
    </div>
</div>

И я пытаюсь выяснить, какой CSS мне нужно добавить, чтобы заполнить область содержимого, независимо от того, сколько вертикального пространства не занятоПо полосе или нижнему колонтитулу.

Обратите внимание, что контейнер position: fixed с top: 0 и bottom: 0, поэтому контейнер занимает 100% высоты окна браузера.Кроме того, полоса имеет заданную высоту, а нижний колонтитул - нет (и не может, поскольку содержимое несколько динамическое).Однако я хочу, чтобы нижний колонтитул занимал минимальное количество требуемого пространства и чтобы область содержимого заполняла оставшееся пространство на странице по вертикали.

Я думаю, что для этого мне нужно использовать flexboxэто, но я не уверен.

Вот CSS, который у меня есть до сих пор:

.container {
    bottom: 0;
    left: 0;
    position: fixed;
    top: 0;
}

.strip {
    background: red;
    height: 5px;
}

.content {
}

.footer {
}

Answer 1

Я надеюсь, что это то, что вы хотели :) Без width или right установленный контейнер будет иметь ширину 0..strip располагается в начале контейнера, а .footer в конце..content разрешено растягивать, но он не будет растягиваться больше, чем его соседи, без свойства flex-grow, которое определяет, насколько гибкий элемент будет расти относительно остальных гибких элементов в гибком контейнере при распределении положительного свободного пространства.

.container {
  bottom: 0;
  left: 0;
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
}

.strip {
  justify-self: flex-start;
  background: red;
  height: 5px;
}

.content {
  justify-self: stretch;
  background: blue;
  flex-grow: 1;
}

.footer {
  justify-self: flex-end;
  background: yellow
}

<div class="container">
  <div class="strip">
  </div>
  <div class="content">
    test
  </div>
  <div class="footer">
    footer
  </div>
</div>

Answer 2

Вы можете сделать это без использования flexbox ...

Вот код:

.container {
  bottom: 0;
  left: 0;
  position: fixed;
  top: 0;
  background-color: red;
  height: 100vh;
  width: 100vw;
}

.strip {
  height: 20%;
  background-color: green;
}

.content {
  height: auto;
  background-color: blue;
}

.footer {
  height: 20%;
  width: 100%;
  background-color: black;
  position: absolute;
}

<div class="container">
  <div class="strip">
  </div>
  <div class="content">
  </div>
  <div class="footer">
  </div>
</div>

Полоса и нижний колонтитул имеют фиксированную высоту (эту высоту можно изменить).Контент будет увеличивать высоту, когда материал добавляется в div.Div содержимого заполнит пространство между полосой и нижним колонтитулом.