Эластичный нижний колонтитул

Question

как бы вы сделали, чтобы контейнер нижнего колонтитула следовал сразу за содержимым, а затем растягивался до нижней части страницы?

Настройка:

• заголовок-контейнер имеет фиксированную высоту 150px
• Контент-контейнер растягивается с тем содержимым, которое должно быть внутри
• нижний колонтитул следит за растяжками до конца страницы.

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

Answer 1

Фактическая стилизация может варьироваться в зависимости от того, уверены ли вы, что ваша страница никогда не будет достаточно длинной для прокрутки. Вы часто можете использовать сам тег body для этого трюка, но он менее гибкий и не рекомендуется.

Идея в том, чтобы создать очень длинный div нижнего колонтитула, и он должен содержаться элементом, который содержит остальную часть вашего контента. Поскольку переполнение родительского объекта скрыто, фактическая длина div будет игнорироваться.

Это часто показано с уравновешивающей нижней подкладкой, но в вашем случае это не нужно.

<style>
   html,body,.bigDiv{height:100%}
   .header{height:150px}
   .footer{height:2000px; background-color:green;}
</style>

<div class="bigDiv" style="overflow:hidden;">

    <div class="header"></div>
    <div class="content">
       Content
    </div>
    <div class="footer">
        Footer
    </div>
</div>