CSS Flexbox или CSS Grid для верхнего колонтитула, закрепленного нижнего колонтитула и вертикально выровненного среднего содержимого вместе? - PullRequest
Новая
       20

CSS Flexbox или CSS Grid для верхнего колонтитула, закрепленного нижнего колонтитула и вертикально выровненного среднего содержимого вместе?

0 голосов
/ 19 февраля 2019

У меня есть требование, по которому у нас есть верхний и нижний колонтитулы.

Высота верхнего и нижнего колонтитула может быть более или менее в зависимости от различных размеров экрана и содержимого в них.

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

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

Пожалуйста, обратитесь к скриншоту ниже для справки, что

Примечание: я могу использовать обычный липкий нижний колонтитул и CALC, чтобы отрегулировать высоту основного содержимого, но этоне будет динамичным.Я не хочу использовать javascript для выполнения всей математики на DOMContentLoaded и изменения размера окна.

enter image description here

1 Ответ

0 голосов
/ 19 февраля 2019

Мой подход использует множество флексбоксов и упрощает задачу.

  • .container - это столбчатый флексбокс
  • main занимает максимально доступное пространство
  • header, footer занимают только необходимое им пространство (динамическое)
  • main также является flexbox, но в направлении ряда для размещения левой и правой панелей
  • панели также являются контейнерами flexbox, центрируя их содержимое по горизонтали и вертикали
  • Вы можете просмотреть демонстрацию в режиме «Полная страница» или в jsFiddle

enter image description here

html,
body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex-grow: 1;
  display: flex;
  background-color: #eee;
}

.panel1,
.panel2 {
  background-color: brown;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-content {
  background-color: #ccc;
  padding: 3em;
}

header,
footer {
  background-color: #ccc;
  padding: 1em;
  text-align: center;
}
<div class="container">
  <header>Header</header>
  <main>
    <div class="panel1">
      <div class="panel-content">
        Content
      </div>
    </div>
    <div class="panel2">
      <div class="panel-content">
        Content
      </div>
    </div>
  </main>
  <footer>Sticky Footer</footer>
</div>

jsFiddle

...