Как прижать нижний край сайта(footer) к низу Как прижать нижний край сайта(footer) к низу - Архив
Как прижать нижний край сайта(footer) к низу
DownLoad_Free

Как прижать нижний край сайта(footer) к низу - Архив

Нашли ошибку или
хотите что-то сообщить -
жмите Ctr+Enter Система Orphus



    [Ленточный вид форума] [Поиск] [RSS]



Страница 1 из 11
Архив » История мировых и локальных событий » История развития сайта » Как прижать нижний край сайта(footer) к низу
Как прижать нижний край сайта(footer) к низу
Дата: Пятница, 12.10.2012, 11:00 | Сообщение # 1
Группа: Администраторы
Сообщений: 1524
Как прижать нижний край сайта(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
Группа: Администраторы
Сообщений: 1524
Еще рабочий 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
Группа: Администраторы
Сообщений: 1524
Вот 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
 
Дата: Понедельник, 12.01.2015, 11:42 | Сообщение # 4
Группа: Администраторы
Сообщений: 1524
Flexbox Footer

http://codepen.io/tylerfowle/pen/zxNLNr
 
Архив » История мировых и локальных событий » История развития сайта » Как прижать нижний край сайта(footer) к низу
Страница 1 из 11
Поиск:


Copyright kachay.ucoz.org © 2008-2016Хостинг от uCoz
^ Наверх ^
Пригодилось!