Нижний колонтитул веб-страницы не достигает нижней части страницы на более коротких страницах

Question

У меня есть несколько веб-страниц на моем веб-сайте, которые несколько коротки, как на рисунке ниже. На таких страницах нижний колонтитул не доходит до нижней части экрана. Как я могу убедиться, что нижний колонтитул находится внизу страницы на всех страницах моего сайта, для всех размеров экрана?

Answer 1

Вам нужен липкую колонтитул, проверьте пример:

html, body { height: 100%; } 
 

 
#wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -30px; } 
 
#bottom, #push { height:30px;} 
 

 
body { background:#333;} 
 
#header { height:30px; background:#000; color:#fff; } 
 
#footer { height:30px; background:#000; color:#fff; }

<div id="wrapper"> 
 
    <div id="header"> 
 
     Header 
 
    </div> 
 
    <div id="push"></div> 
 
</div> 
 
<div id="bottom"> 
 
    <div id="footer"> 
 
     Footer 
 
    </div> 
 
</div>

Или другой пример: http://ryanfait.com/html5-sticky-footer/

Надеется, что это помогает!

Answer 2

Обычно я добавляю мин-высоту области содержимого, так что всегда, по крайней мере, что высота, и поэтому поставлю колонтитул в нижней части чаще, чем нет. Я считаю, что высота не менее 500-800 пикселей должна сделать это.