Footer (подвал сайта) всегда внизу

23.01.13 25.01.15 Нет 5315

Footer всегда внизу. Лучшее решение, имхо.

Пример использования:

Между <head></head>:

<style type="text/css">
html, body { 
height: 100%;
margin: 0; 
padding: 0; 
}
html>body #all {
height: auto; 
min-height: 100%; 
}
#all {
height: 100%; 
width:972px; 
position: relative; 
color: #404040;
margin:0 auto;
}
#empty, #footer { 
height: 32px; 
}
#footer { 
bottom: 0; 
left: 0; 
margin-bottom:10px; 
position: absolute; 
width: 970px; 
display:block; 
background:url('/images/footer.gif');
border:1px #376FA7 solid;
}
#main {
padding-top:20px;
}
#content {
padding-left:40px; 
width: 932px;
border:1px #376FA7 solid;
}
body {
background:#D1EAF4;
font-size:12px;
font-family: Arial;
}
h3{
color: black;
font-size:15px;
font-family: Tahoma;
margin:0;
padding:5px;
line-height:15px;
}
</style>

Между <body></body>:

<div id="all">
        <div id="main">
                <div id="content">
                <h3>Контент страницы</h3>
 <p>Lorem ipsum dolor sit amet.....</p>
                </div>
        </div>
        <br style="clear:both">
        <div id="empty">&nbsp;</div>
        <div id="footer">
                <h3>Эта надпись внизу, сколько бы контента не было на странице</h3>
        </div>

Источник

Смотреть пример

Скачать исходник Размер: 1,57kB | Изменен: 23.01.13 | Загрузок: 1402