Достаточно хороший способ прижать футер страницы книзу средствами CSS.
Создайте html документ, скопируйте в него код ниже и проверте сами :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<p> !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd <br />
html xmlns= http://www.w3.org/1999/xhtml xml:lang= uk </p>
<p> head<br />
meta http-equiv= Content-Type content= text/html; charset=windows-1251 /<br />
titleПрижатие footer к низу экрана/контента /title</p>
<p> style type= text/css media= all </p>
<p>* {<br />
margin: 0;<br />
padding: 0;<br />
border: 0;<br />
font-size: 100.01%;<br />
}</p>
<p>html {<br />
/*------------ 100% высота контейнера div.page далее */<br />
height: 100%;<br />
/*------------*/</p>
<p> background: #fab0b0;<br />
}</p>
<p>body {<br />
/*--------------- 100% высота контейнера div.page далее */<br />
min-height:100%;<br />
height: 100%;<br />
/*---------------*/</p>
<p> background: #fafab0;</p>
<p> color: #000;<br />
font-weight: normal;<br />
font-family: Arial, Verdana, Helvetica, Sans-Serif;<br />
}</p>
<p>/* Контейнер всего содержимого кроме подвала */<br />
div.page {<br />
width: 760px;<br />
margin: auto;</p>
<p> /*----------------------- 100% высоты контейнера относительно клиентской области и контента для IE, FF, Opera */<br />
height: auto !important;<br />
min-height:100%;<br />
height: 100%;<br />
/*-----------------------*/</p>
<p> background: #f0f0f0;<br />
}</p>
<p>/* блок гарантирующий, что область на коотрую накладывается div.footer в div.page останется пустой, */<br />
/* наличие этого блока устанавливает высоту div.page 100% относительно клиентской области и контента в FF, Opera */<br />
div.page div.footer_guarantor {<br />
height: 40px;<br />
clear: both;</p>
<p> border: 1px dashed #666;<br />
text-align: right;<br />
color: #999;<br />
}</p>
<p>/* Контейнер подвала */<br />
div.footer {<br />
margin: auto;<br />
margin-top: -40px;<br />
width: 760px;<br />
height: 40px;<br />
clear: both;</p>
<p> background: #b0f0f0;<br />
}</p>
<p>/* Контейнер шапки */</p>
<p>div.page div.header {<br />
height: 180px;</p>
<p> background: #f0a060;<br />
}</p>
<p>/* Патч для установки минимальной высоты в IE */</p>
<p>div.page div.patch_minheight {<br />
width: 1px;<br />
height: 250px;<br />
float: right;<br />
}</p>
<p>/* Контейнер вспомогательной полосы */</p>
<p>div.page div.sidebar {<br />
width: 180px;<br />
float: left;</p>
<p> background: #b0f0b0;<br />
}</p>
<p>/* Контейнер основной полосы */</p>
<p>div.page div.mainbar {<br />
width: 580px;<br />
overflow: hidden;<br />
float: left;</p>
<p> background: #b0b0f0;<br />
}</p>
<p> /style<br />
/head</p>
<p> body<br />
div class= page </p>
<p> div class= header h1Header /h1</p>
<p> br /<br />
h2Дано: /h2<br />
ul style= list-style: none; <br />
li &nbsp;- фиксированная ширина контента 760px по центру; /li<br />
li &nbsp;- шапка 180px в высоту; /li<br />
li &nbsp;- вспомогательная колонка 180px в ширину, минимальная высота 250px; /li<br />
li &nbsp;- основная полоса 580px в ширину, минимальная высота 250px; /li<br />
li &nbsp;- подвал 40px в высоту, всегда прижат к низу экрана. /li<br />
/ul</p>
<p> /div</p>
<p> div class= sidebar h1Sidebar /h1<br />
div class= patch_minheight /div</p>
<p> br /<br />
h2Блоки: /h2<br />
ul style= list-style: none; <br />
li &nbsp; span style= background-color:#fab0b0; border: 1px solid #000; &nbsp;&nbsp;&nbsp;&nbsp; /span - html /li<br />
li &nbsp; span style= background-color:#fafab0; border: 1px solid #000; &nbsp;&nbsp;&nbsp;&nbsp; /span - body /li<br />
li &nbsp; span style= background-color:#f0f0f0; border: 1px solid #000; &nbsp;&nbsp;&nbsp;&nbsp; /span - div.page /li<br />
li &nbsp; span style= background-color:#f0a060; border: 1px solid #000; &nbsp;&nbsp;&nbsp;&nbsp; /span - div.header /li<br />
li &nbsp; span style= background-color:#b0f0b0; border: 1px solid #000; &nbsp;&nbsp;&nbsp;&nbsp; /span - div.sidebar /li<br />
li &nbsp; span style= background-color:#b0b0f0; border: 1px solid #000; &nbsp;&nbsp;&nbsp;&nbsp; /span - div.mainbar /li<br />
li &nbsp; span style= background-color:#f0f0f0; border: 1px dashed #000; &nbsp;&nbsp;&nbsp;&nbsp; /span - div.footer_guarantor /li<br />
li &nbsp; span style= background-color:#b0f0f0; border: 1px solid #000; &nbsp;&nbsp;&nbsp;&nbsp; /span - div.footer /li<br />
/ul</p>
<p> /div</p>
<p> div class= mainbar h1Mainbar /h1<br />
div class= patch_minheight /div</p>
<p> br /<br />
iБлок bfooter_guarantor /b служит для гарантии того, что подвал не наедет на контент основной или вспомогательной полосы. /i<br />
br /<br />
br /<br />
iНерегулярно может наблюдаться bглюк /b отлипания подвала от нижней границы окна при уменьшении размеров окна и последующем скролинге вниз в броузере Opera; исчезает после перезагрузки страницы (данный баг считаю сугоболичной проблемой Opera и считаю бессмысленным бороться над его исправлением, глумлясь над версткой; подобный глюк автор наблюдал на схожих решениях с вресии 7.54). /i<br />
br /<br />
br /<br />
iПроверено в IE 6.0, FF 1.5, Opera 9.01 /i</p>
<p> /div</p>
<p> div class= footer_guarantor h1Footer guarantor /h1 /div</p>
<p> /div</p>
<p> div class= footer h1Footer /h1</p>
<p> /div</p>
<p> /div</p>
<p> /body<br />
/html</p>
</body>
</html>
Ссылка на источник
Комментариев нет:
Отправить комментарий