DIV со 100% высотой слишком высокий даже без содержимого

Question

Я пытаюсь реализовать липкий нижний колонтитул , который работает, за исключением того, что высота 100% основного упаковочного объекта слишком велика (# body-wrap), и это вызывает огромный разрыв между контентом и нижний колонтитул. Таким образом, вместо нижнего колонтитула, расположенного внизу экрана, как это и должно быть, мне нужно прокрутить страницу за огромным промежутком, чтобы просмотреть ее.

У меня есть что-то вроде моего HTML:

<div id="body-wrap">

    <div id="content">

             [about 100px of content here]

    </div><!-- end #content -->

<div class="push"></div>

</div><!-- end #body-wrap -->

<div id="footer-wrap">

    <div id="footer-content">

              [about 300px of content here]

    </div> <!-- end #footer-content -->

</div> <!-- end #footer-wrap -->

И мой CSS:

html, body {
height: 100%;
}

#body-wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -300px; /* the bottom margin is the negative value of the footer's   height */
 }

.footer-main-wrap, .push {
height: 300px; /* .push must be the same height as .footer */
}

У кого-нибудь есть идеи, почему высота 100% будет расширяться дальше, чем содержимое?

Answer 1

Когда вы указываете высоту в процентах (например, height: 100%), это относится к контейнеру parent , а не к содержимому элемента.Если вам не нужна поддержка IE6, вам, вероятно, будет гораздо проще реализовать это, используя position: fixed для нижнего колонтитула.Редактировать: я только заметил еще одну вещь - в вашей разметке у вас есть элемент с идентификатором footer-wrap, но в вашем CSS вы используете селектор .footer-main-wrap.Попробуйте изменить .footer-main-wrap в вашем CSS на #footer-wrap.

Answer 2

Добавление height 100% к вашему html и height auto к вашему body заставит его корректно корректироваться, когда страница недостаточно длинна