CSS Layout: Footer в нижней или в конце страницы (если дальше)

Question

Я знаю, такого рода вопросы было предложено много, но как-то правильный ответ всегда ускользает меня ...

Хорошо, я у меня есть две вещи, которые я хочу:

• Нижний колонтитул, который всегда находится в нижней части страницы, независимо от того, имеет ли контент меньшую высоту, чем доступный экран или больше.
• Содержание выше сноске необходимо заполнить остальную часть экрана - или больше места, при необходимости

Первая часть довольно легко, например, here, с чем-то вроде этого ...

.footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 

Проблем нет. Но как я могу получить содержимое над элементом .footer, чтобы заполнить оставшееся пространство? height=100%; явно не работает;

Каждый получил представление о том, как реализовать макет с ...

• Фиксированный заголовок
• нижнего колонтитула в нижней части экрана (или ниже, если содержание нуждается в большем количестве, чем высота)
• содержания, которое заполняет имеющийся экран или использует более, если это необходимо

(причина заключается в том, что в конце концов, я хочу сетку с гибкой высотой, которая заполняет экран содержания)

Answer 1

header { 
 
    width: 100%; 
 
    position: fixed; 
 
    background-color: #9f0d0d; 
 
    color: #f5f5f5; 
 
    border-bottom: 1px solid #ddd; 
 
    min-height: 5%; 
 
} 
 

 
    header :first-child { 
 
     vertical-align: middle; 
 
     margin-top: auto; 
 
     margin-bottom: auto; 
 
    } 
 

 
article { 
 
    top: 55px; 
 
    width: 100%; 
 
    height: 90%; 
 
    position: fixed; 
 
} 
 

 
footer { 
 
    top: 95%; 
 
    min-height: 5%; 
 
    width: 100%; 
 
    position: fixed; 
 
    padding: 10px 15px; 
 
    background-color: #9f0d0d; 
 
    color: #f5f5f5; 
 
    border-top: 1px solid #ddd; 
 
}

<div> 
 
    <header>HEADER</header> 
 
    <article>CONTENT</article> 
 
    <footer>FOOTER</footer> 
 
</div> 
 

Не стесняйтесь играть с этим блоком кода.