|
Как прижать нижний край сайта(footer) к низу
|
|
|
| Дата: Пятница, 12.10.2012, 11:00 | Сообщение # 1 |
|
Группа: Администраторы
Сообщений: 1530
| Как прижать нижний край сайта(footer) к низу, если высота содержимого страницы меньше высоты экрана(окна браузера)
Идея в том, чтобы растянуть основной блок содержимого на весь экран и зарезервировать снизу некоторое место под "Футер"
HTML-CSS Код
------------------------------------------------------------------------
<html>
<head>
<title>Footer 2 Bottom</title>
<style type="text/css">
* {margin: 0; padding: 0;} /* обнуляем отступы */
body {
background: #fff;
}
html,body {
height: 100%; /* задаем высоту тела документа */
}
.main { /* основной блок, который должен растянуться до подвала */
background: #999; /* цвет фона основного блока (для наглядности) */
min-height: 100%; /* задаем минимальную высоту основного блока */
}
* html .main { /* хак для ie6 */
height: 100%; /* для ие6, т.к. не понимает min-height */
}
.hFooter { /* это распорка в основном блоке - резервируем место для подвала */
height: 100px; /* высота нашего подвала */
}
.footer { /* подвал */
background: #0000CC; /* цвет фона подвала (для наглядности) */
color: #fff;
height: 100px; /* высота подвала */
margin-top: -100px; /* делаем отрицательный отступ по высоте равный высоте подвла, чтобы четко вписаться в размер экрана */
}
</style>
</head>
<body>
<div class="main">
Основная разметка
<div class="hFooter"></div>
</div>
<div class="footer">footer</div>
</body>
</html>
------------------------------------------------------
Пример: http://www.xiper.net/examples/footer-vnizu.html
Источник: http://www.xiper.net/collect....zu.html
|
| |
| |
|
| Дата: Пятница, 12.10.2012, 11:16 | Сообщение # 2 |
|
Группа: Администраторы
Сообщений: 1530
| Еще рабочий 100% рабочий вариант прижатого к низу футера, содержащий меню, контейнер для информации(текста) и сам футер
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body,html{height:100%;padding:0;margin:0;}
#cont{min-height:98%;width:1000px;margin:0 auto;}
#text{width:700px;min-height:300px;margin:-92px auto 0;*margin:-92px auto 0;padding:92px 0 0;overflow:hidden;}
#menu{width:200px;height:200px;margin:0px;float:left;padding:122px 0 0;}
#foo{text-align:center;margin:0 auto;width:1000px;}
</style>
</head>
<body>
<div id="cont">
<div id="menu">menu</div>
<div id="text">
<div style="height:30px;"></div>
GTA2. Следующий уровень. Автоспортивный журнал
06:30Ралли-рейд. Африка Эко РейсСпорт
06:45Открытый чемпионат Австралии по теннису. Журнал
06:50Теннис. Турнир ATP. Доха (Катар). 1/2 финалаСпорт
07:30Технический перерыв
13:45Ралли-рейд. Африка Эко РейсСпорт
14:00Live. Лыжное двоеборье. Кубок мира. Чайковский (Россия)
15:00Биатлон. Кубок мира. Оберхоф (Германия). Спринт. МужчиныСпорт
15:45Live. Горные лыжи. Кубок мира. Загреб (Хорватия). Слалом. Женщины
17:00Live. Лыжные гонки. Тур де Ски. Валь ди Фиемме (Италия). 10 км. Мужчины
18:15Live. Биатлон. Кубок мира. Оберхоф (Германия). Гонка преследования. МужчиныСпорт
19:15Live. Горные лыжи. Кубок мира. Загреб (Хорватия). Слалом. Женщины
20:00Live. Прыжки на лыжах. Турне 4-х трамплинов. Инсбрук (Австрия). HS-130
22:00Live. Лыжные гонки. Тур де Ски. Валь ди Фиемме (Италия). 5 км. Женщины
22:45Live. Биатлон. Кубок мира. Оберхоф (Германия). Гонка преследования. ЖенщиныСпорт
23:45Live. Санный спорт. Кубок мира. Кенигзее (Германия). Двойки
00:45Live. Санный спорт. Кубок мира. Кенигзее (Германия). Двойки
01:40Открытый чемпионат Австралии по теннису. Журнал
01:45Теннис. Турнир ATP. Доха (Катар). ФиналСпорт
03:40Sport Excellence. Журнал
03:45Прыжки на лыжах. Турне 4-х трамплинов. Инсбрук (Австрия). HS-130
04:40Fight Club Special. Журнал
GTA. Следующий уровень. Автоспортивный журнал
06:30Ралли-рейд. Африка Эко РейсСпорт
06:45Открытый чемпионат Австралии по теннису. Журнал
06:50Теннис. Турнир ATP. Доха (Катар). 1/2 финалаСпорт
07:30Технический перерыв
13:45Ралли-рейд. Африка Эко РейсСпорт
14:00Live. Лыжное двоеборье. Кубок мира. Чайковский (Россия)
</div>
</div>
<div style="clear:both;height:20px;"></div>
<div id="foo">footer</div>
</body>
</html>
|
| |
| |
|
| Дата: Среда, 24.09.2014, 04:24 | Сообщение # 3 |
|
Группа: Администраторы
Сообщений: 1530
| Вот 100% рабочий скрипт с помощью jQuery
<script type="text/javascript">
$( document ).ready(function(){
var w=parseInt(($( window ).width()-1000)/2,10);
if($(window).height()>680) {
$("#footer").css("position","absolute");
$("#footer").css("left",w);
$("#footer").css("bottom","0");
} else {
$("#footer").css("position","relative");
$("#footer").css("left","0");
}
});
$( window ).resize(function(){
var w=parseInt(($( window ).width()-1000)/2,10);
if($(window).height()>680) {
$("#footer").css("position","absolute");
$("#footer").css("left",w);
$("#footer").css("bottom","0");
} else {
$("#footer").css("position","relative");
$("#footer").css("left","auto");
}
});
</script>
-------------------------------------------------------
Примечания:
1000 - ширина футера
680 - размер окна, меньше которого, мы не хотим привязывать футер к низу окна
Рабочий пример: http://photoset-nsk.ru/galery.php
|
| |
| |
|
|
Играйте бесплатно в 
