CSS Расстояние между header и footer пустой галереи

Рейтинг: -1Ответов: 1Опубликовано: 12.01.2023

Необходимо сделать так, чтобы хедер и футер были пришиты к верхнему и нижнему краям экрана cоответственно при пустой галереи (до запроса на бекенд)?

css gallery header
Источник: Stack Overflow на русском

Ответы

▲ 0

Если у вас есть какой-либо контейнер, то его можно растянуть через flex-grow: 1;
Если же нет, то футеру добавить margin-top: auto;

*{padding: 0; margin: 0;}
html {
height: 100%;
}
body {
  height: 100%;
  display: flex;
  flex-direction:column;
}

main {
  flex-grow: 1;
  display:none;
  background:red;
}
footer {
  margin-top: auto;
}
<html>
<head></head>
<body>
  <header>header</header>
  <main>main</main>
  <footer>footer</footer>
</body>
</html>