Почему блок отображается не того размера?

Question

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

Здравствуйте.
Почему .sections не занимает все место (в высоту), кроме хедера? Вроде же все секции внутри него находятся. Скорее всего это происходит из-за того, что #about и #skills по какой-то причине занимают не весь экран. А вот этому я уже не могу найти объяснения.

Залил код на хостинг: justme.matdev.ru/index-image.html

Заранее спасибо!

Answer 1

[Ankhena]

Все очень просто: внутри #about и #skills блоки с float'ом, а значит выведены и потока и родительский блок не растягивается по высоте.

У других блоков внутри .sections блоки с абсолютным позиционированием - аналогично.

Ставьте clearfix или используйте flex или overflow, что Вам ближе.

Answer 2

[axeax]

prntscr.com/comjpd

Comments

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

Что вы имели ввиду? Я убрал padding - ничего не поменялось.

[axeax]

что значит "не занимает все место, кроме хедера" ?

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

Под "не занимает все место" я имел ввиду в высоту, а не в ширину

[axeax]

ну и добавьте как у header height: 100vh;

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

axeax: это было бы крайне странно, ведь тогда блок, который должен оборачивать ВЕСЬ сайт, кроме хедера, будет оборачивать лишь тот кусок, что соизмерим с высотой экрана.

[axeax]

Тогда в самом конце перед закрытием дива .sections добавьте блок и пропишите прямо в нем style="clear:both"

[axeax]

Ответ ниже объясняет почему блок не растягивается, а решение для таких случаев с float-ами такое =)

Answer 3

[Max Medar]

Вам стоит правильно использовать bootstrap. А если не хотие, то вручную расставляйте clearfix.