Почему содержимое дочернего div выходит из родительского div?

Так что я делаю веб-дизайн: http://codepen.io/wostensen/pen/woxYgX Почему содержимое дочернего div выходит из родительского div?

Но я не могу за жизнь мне понять, почему .articles не будет оставаться в .primary. overflow: hidden не дает мне удовлетворительного результата, так как я хочу, чтобы пользователь мог читать все сообщения в блоге. display: block ничего не делает для любого родительского элемента или даже элемента, о котором идет речь.

Я вижу, что в режиме отладки + инструменты для разработчиков, которые .articles течет вне .primary без видимых причин. Нижний колонтитул должен быть самым концом веб-страницы, и контент просто проходит через него.

Есть ли что-нибудь, что я просто пропустил?

источник

2016-12-12 gloriousCatnip

Разве это не то, что вы хотите (все еще требуется полировка)? https://codepen.io/Aer0/pen/dOqzKb?editors=1100 – Aer0

Попробуйте удалить «height: 100%» из .primary ИЛИ, как упоминалось выше в примере использования overflow: auto, если вы хотите исправить высоту и полосу прокрутки на основном , – crazyrohila

В классе .primary не указывать height: 100%. Изменить что auto (или даже удалить его)

.primary { 
    padding: 1em 1.5em; 
    background: white; 
    width: 75%; 
    margin: 0 auto; 
    height: auto; 
}

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

Update:

Заметили контейнер .primary (то есть .content) тоже имеет height: 100%. Удалите (или сделайте это auto) отсюда.

источник

2016-12-12 12:10:13

О, круто. Это сработало! Но почему нижний колонтитул не следует вниз по странице? Я разместил его ниже div 'content', так что не следует ли его отбрасывать? – gloriousCatnip

Тогда я думаю, что ваш '.content' тоже имеет' height: 100% '. Позвольте мне проверить и обновить ответ. –

Я понял! Кажется, это был преступник. Спасибо огромное! :) – gloriousCatnip

Почему содержимое дочернего div выходит из родительского div?

ответ

Смежные вопросы