Прижать подвал(футер) к низу экрана в IE? Хоть убейте, ну не знал я как прижать к низу. Ах да, забыл, речь идет о блочной верстке. Я пользовался таблицами, но тогда верстка теряет чистоту. Поэтому этот вариант меня не устраивал. Поиски в google ничего не принесли, только лишь не кроссбраузерные варианты.
Но нашелся человек, который сделал все правильно и кроссбраузерно. Предлагаю вам решение:
Что нам нужно:
- Футер прижат к низу не зависимо от количества контента.
- Работа во всех браузерах. По крайней мере в большинстве.
- Независимость от верстки, какая бы сложная она ни была.
Решение:
Сразу приведу код, я его закомментировал. Далее мы его разберем.
<html>
<head>
<title>Подвал к низу</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* <![CDATA[ */
* {/* обнуляем отступы */
margin: 0;
padding: 0;
}
html,body {
height: 100%; /* задаем высоту тела документа */
width:100%; /* задаем ширину тела документа */
}
.main { /* основной блок, который должен растянуться до подвала */
background: #999; /* цвет фона основного блока (для наглядности) */
min-height: 100%; /* задаем минимальную высоту основного блока с хаком для IE 6.0*/
height:auto !important;
height:100%;
}
.hFooter { /* это распорка в основном блоке - резервируем место для подвала */
height: 60px; /* высота нашего подвала */
}
.footer { /* подвал */
background: #0099CC; /* цвет фона подвала (для наглядности) */
color: #fff; /* цвет текста подвала */
height: 60px; /* высота подвала */
margin-top: -60px; /* делаем отрицательный отступ по высоте равный высоте подвала, чтобы четко вписаться в размер экрана */
}
/* ]]> */
</style>
</head>
<body>
<div class="main">
Это основной блок
<div class="hFooter"></div>
</div>
<div class="footer">Это подвал</div>
</body>
</html>
Кстати, для тех кто не понимает для чего див с классом hFooter — то он нужен для того, чтобы подвал не наезжал на контент.
Если есть вопросы по коду задавайте, с большой радостью расскажу все! =).
Ответить | Цитировать
Ответить | Цитировать
function footer(){
var main_h = parseInt($(«#main»).css(‘height’));
var header_h = parseInt($(«#header»).css(‘height’));
var footer_h = parseInt($(«#footer»).css(‘height’));
var bh = window.innerHeight;
var footer = bh-main_h-header_h-7;
if (footer > min-height){
$(«#footer»).height(footer+’px’);
} else{
$(«#footer»).height(‘auto’);
}
таким образом мы получаем резиновый див. Функцию надо прикрутить к wndow.onresize. наворачивать сайт целым рядом контейнеров , создвать отрицательные значения и т.п. — мне кажется лишне.
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Только принцип моего кода отличается от вышенаведённого:)
Ответить | Цитировать
У меня проблемма в следующем, если кто сталкивался подскажите плиз, буду премного благодарен.
Контент уходит под футер который внизу страницы , но после нажатия ctrl+R все становится на свои места и нормально отбражается, тоесть после повторной перезагрузки страницы. Пробовал на всех браузерах проблема остается аналогичной. спасибо
Ответить | Цитировать
Ответить | Цитировать
пробовал ставить всяческие распорки, результат нулевой, но повторюсь после нажатия ctrl+R все становится на свои места и нормально отбражается, после рестарта компа та же беда, и так на всех машинах…
спасибо за ответ, пройду еще по вашей ссылке.
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Проверяем как работает функция «Ответить»
Руслан писал(а):
А это мы цитируем 🙂 тоже проверяем