Flexbox выравнивает некоторые проблемы с div'ами при добавлении / удалении компонентов

Question

Я не могу заставить footer оставаться внизу страницы, а subheader находиться чуть ниже header без пробелов, в то время как я могу добавлять или удалять промежуточный контент.

.wrapper {
  display: flex;
  height: 100%;
  flex-wrap: wrap;
  font-weight: bold;
  text-align: center;
}

.header {
  background: tomato;  
  
  flex-grow: 1;
  flex-basis: 100%;
  height: 40px;
  align-self: flex-start;
}

.subheader {
  background: deepskyblue;
  
  margin-bottom: auto;
  flex-grow: 1;  
  flex-basis: 100%;
  height: 60px;
  align-self: flex-start;
}

.sidebar-wrapper {
  background: gold;

  height: 100%;
  flex-grow: 1;
  flex-basis: 20%;
}

.sidebar {
  background: purple;
  
  height: 80vh;
  top: 15px;  
  position: sticky;
}

.content {
  background: hotpink;
  
  height: 100%;
  flex-grow: 1;
  flex-basis: 80%;
}

.footer {
  background: lightgreen;
  
  height: 40px;
  flex: 1 100%;
  margin-top: auto;
}

<div class="wrapper">

    <div class="header">Header</div>

    <div class="subheader">Subheader</div>

    <div class="sidebar-wrapper">
      <div class="sidebar">
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
        quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
      </div>
    </div>

    <div class="content">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
        quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
        ultricies mi vitae est. Mauris placerat eleifend leo.</p>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
        quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
        ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </div>

    <div class="footer">
      Footer
    </div>

  </div>

Чтобы увидеть «неправильное поведение», просто удалите элементы «sidebar-wrapper» и «content».Извините, что не могу найти более простой способ описания моей проблемы.

https://stackblitz.com/edit/angular-umydqv

Answer 1

Этого макета можно добиться с помощью flexbox, но он немного сложен и неэффективен.Как минимум, для этого могут потребоваться вложенные контейнеры.

Потенциально лучшее решение лежит на CSS Grid.Никаких изменений в HTML не требуется.

( поддержка браузера в виде сетки )

Ваш макет с дополнительными элементами содержимого:

.wrapper {
  display: grid;
  grid-template-rows: 40px 60px 1fr 40px;
  grid-template-columns: 20% 1fr;
  height: 100vh;
  font-weight: bold;
  text-align: center;
}

.header {
  grid-column: 1 / -1;
  background: tomato;
}

.subheader {
  grid-column: 1 / -1;
  background: deepskyblue;
}

.footer {
  grid-row: 4 / 5;
  grid-column: 1 / -1;
  background: lightgreen;
}

.sidebar-wrapper {
  background: gold;
  display: flex; /* for full height of child */
}

.sidebar {
  background: purple;
}

.content {
  background: hotpink;
}

body {
  margin: 0;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="subheader">Subheader</div>
  <div class="sidebar-wrapper">
    <div class="sidebar">
      Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
    </div>
  </div>
  <div class="content">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </div>
  <div class="footer">Footer</div>
</div>

Ваш макет, без дополнительных элементов содержимого:

.wrapper {
  display: grid;
  grid-template-rows: 40px 60px 1fr 40px;
  grid-template-columns: 20% 1fr;
  height: 100vh;
  font-weight: bold;
  text-align: center;
}

.header {
  grid-column: 1 / -1;
  background: tomato;
}

.subheader {
  grid-column: 1 / -1;
  background: deepskyblue;
}

.footer {
  grid-row: 4 / 5;
  grid-column: 1 / -1;
  background: lightgreen;
}

.sidebar-wrapper {
  background: gold;
  display: flex; /* for full height of child */
}

.sidebar {
  background: purple;
}

.content {
  background: hotpink;
}

body {
  margin: 0;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="subheader">Subheader</div>
  <div class="footer">Footer</div>
</div>

Answer 2

Вы пытаетесь сделать слишком много вещей, используя слишком мало оболочек.

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

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

Удаление вашей боковой панели или содержимого из основной области не испортитвнешний макет таким образом.

html,
body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-wrap: nowrap;
  font-weight: bold;
  text-align: center;
}

main {
  flex: 1 1 100%;
  display: flex;
}

.header {
  background: tomato;
  height: 40px;
}

.subheader {
  background: deepskyblue;
  height: 60px;
}

.sidebar {
  background: purple;
  flex: 1 0 40%;
}

.content {
  background: hotpink;
}

.footer {
  background: lightgreen;
  height: 40px;
}

<div class="wrapper">

  <header>
    <div class="header">Header</div>
    <div class="subheader">Subheader</div>
  </header>

  <main>

    <div class="sidebar">
      Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
    </div>

    <div class="content">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </div>

  </main>

  <div class="footer">
    Footer
  </div>

</div>