Блок на всю ширину страницы с использованием Flexbox

Question

Хочу узнать как грамотно растянуть блок main на всю высоту экрана. Структура очень простая. Но непонятно, правильно я реализовала все. Нашла решение с помощью флексов, код ниже. Нужно ли что-то исправить?

   <html>
     <body>
       <div class="header"></div>
       <div class="main"></div>
       <div class="footer"></div>
     </body>
    </html>

body {
    background-color: #000000;
    color: #ffffff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main {
    flex-grow: 1;
}

Нужно ли остальным частям добавить свойство flex-grow? Шапке и подвалу.

Answer 1

если растянуть на ШИРИНУ, то вообще делать ничего не надо. дивы и без того во всю ширину по умолчанию.

А так... это то, что вы хотели получить?

html {
  height: 100%;
}

body {
  background-color: wheat;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: salmon;
  padding: 1em;
}

.main {
  flex: 1;
  overflow: auto;
  padding: 1em;
}

.footer {
  background-color: coral;
  padding: 1em;
}

<html>

<body>
  <div class="header">header</div>
  <div class="main">main
    <br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text</div>
  <div class="footer">footer</div>
</body>

</html>

БЛОГ НА HUSL

Блок на всю ширину страницы с использованием Flexbox

Ответы (1 шт):