Почему div не занимает все пространство?

Question

[Гриша Никольский]

Здравствуйте. Мучаюсь с банальной проблемой. Есть следующий код:

HTML

<header class="main-head">
    <div class="main-text">
        <p>Hello World!</p>
    </div>
</header>

CSS

.main-text {
  display: flex;
}
.main-text p {
  display: inline-block;
}

Хотел отцентрировать по вертикали и горизонтали мою надпись. После просмотра кода в браузере обнаружил, что <header> занимает все выделенное для него пространство, а <div> только оборачивает абзац. То есть занимает лишь то место, которое занимает сам <p>(по вертикали). По горизонтали он занимает все свободное пространство. Нужно сделать так, чтобы и по вертикали блок занимал все пространство страницы.

По всякому извращался в CSS, но так и не пришел к решению проблемы. Крайне надеюсь на вашу помощь, т.к наверняка проблема решается просто.
Заранее спасибо!

Answer 1

[gassmonkey]

Очевидно, класс .main-text и тег p имеют св-во display:inline-block

Comments

[Гриша Никольский]

Прошу прощения, совершенно забыл выложить CSS. Пост отредактировал.

[gassmonkey]

Гриша Никольский: Ну значит из-за .main-text{display: flex;} div перестаёт быть блочным, и больше не занимает всю доступную ширину.

[Гриша Никольский]

По горизонтали он занимает все свободное пространство. Нужно сделать так, чтобы и по вертикали блок занимал все пространство страницы. А пока что он высотой в тег P + padding

Answer 2

[Алексей Струков]

Поставь ему height: 100%