Привязка подвала к низу страницы

pasha

Сообщения: 1048 Репутация: N Группа: Адекваты

25 августа 2008 г. 17:49

Не всасал как сделать… да и с версткой плохо :(
md5

Сообщения: 11960 Репутация: N Группа: в ухо

25 августа 2008 г. 17:49, спустя 35 секунд

надо ещё пробывать всасывать

все умрут, а я изумруд
AlexB

Сообщения: 4306 Репутация: N Группа: в ухо

25 августа 2008 г. 18:09, спустя 19 минут 8 секунд

На самом деле это сложнейшая задача научной магии.

Если кто сумеет это сделать с загловком
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
то ваще респект и уважуха. Я лично не смог.

Как делать в стандарт-моде в инете примеры 100 пудово есть, так что спрашивай у яндекса.

ЗЫ. Все вышесказанное относится, разумеется, к блокам, а не таблицам.

Сообщения: 1068 Репутация: N Группа: Джедаи

26 августа 2008 г. 12:25, спустя 18 часов 16 минут 5 секунд

способов несколько, я обычно использую отрицательный margin.

Этот пример (как видно, вообще без !DOCTYPE) работает везде, начиная с IE5.5 (более ранние не проверял)

<html>
<head>
<title>Sample page</title>
<style type="text/css">
html,body{
    height:100%;
    margin:0;
    overflow:auto;
}
#content{
    color:#333;
    background:#ccc;
    min-height:100%;
}
*html #content{ /* Вместо этого хака лучше использовать условные комментарии */
    height:100%;
}
#content-clear{ /* Данный блок нужен, чтобы подвал не налезал на контент */
    clear:both;
    height:100px;
}
#footer{
    color:#ccc;
    background:#333;
    margin-top:-100px; /* тот самый отрицательный margin */
    height:100px;
}
</style>
</head>
<body>

<div id="content">
 CONTENT
 <div id="content-clear"></div>
</div>

<div id="footer">FOOTER</div>

</body>
</html>

Недостаток
- фиксированная высота подвала;
- нарушение семантики служебным блоком #content-clear.

AlexB

Сообщения: 4306 Репутация: N Группа: в ухо

26 августа 2008 г. 12:40, спустя 15 минут 8 секунд

О, вроде работает. Тимур, как всегда, на высоте. Ну как тут без плюсика обойтись … )))
Z-MODe

Сообщения: 199 Репутация: N Группа: Кто попало

3 сентября 2008 г. 1:47, спустя 7 дней 13 часов 7 минут

Вместо этого хака лучше использовать условные комментарии

Что такое условные комментарии и почему лучше?
Timur

Сообщения: 1068 Репутация: N Группа: Джедаи
3 сентября 2008 г. 9:39, спустя 7 часов 51 минуту 50 секунд
Лучше, потому позволяют сохранить валидность CSS-кода

Про условные комментарии:

http://ru.wikipedia.org/wiki/Условный_комментарий

http://blog.sribna.com/uslovnyie-kommentarii-v-css.htm

http://blog.sribna.com/uslovnyie-kommentarii-v-css.htm

Или другой вариант: http://dimox.name/css_hacks_vs_conditional_comments/

pasha

Сообщения: 1048 Репутация: N Группа: Адекваты

6 сентября 2008 г. 0:04, спустя 2 дня 14 часов 25 минут

Вообщем привязал шапку… хочется чтобы страница не прокручивалась… как исправить?

<html>
<head>
<title>Sample page</title>
<style type="text/css">
html,body{
    height:100%;
	width:auto;
	margin:0;
    overflow:auto;
}

#header{

border-bottom:#6A0000 groove;
vertical-align:middle;
padding-left: 5px;

}

.s1{
font-size: 25px;
}

#content{
    color:#333;
    background:#ccc;
    min-height:100%;
}
*html #content{ /* Вместо этого хака лучше использовать условные комментарии */
    height:100%;
}
#content-clear{ /* Данный блок нужен, чтобы подвал не налезал на контент */
    clear:both;
    height:1px;
	width: 3px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
}
#footer{
    color:#CC0000;
    background: #FFFFFF;
    border-top:#6A0000 groove;
    margin-top:-100px; /* тот самый отрицательный margin */
    height:100px;

}
</style>
</head>
<body>
<div id="header"><span class="s1">шапка</span></div>
<div id="content">
 <div id="content-clear">контент</div>
</div>

<div id="footer">подвал</div>

</body>
</html>

Timur

Сообщения: 1068 Репутация: N Группа: Джедаи

6 сентября 2008 г. 13:06, спустя 13 часов 2 минуты 2 секунды

я наверное хреново объяснил :)

<html>
<head>
<title>Sample page</title>
<style type="text/css">
html,body{
    height:100%;
    margin:0;
    padding:0;
}

#page{
    background:#eee;
    min-height:100%; /* на весь экран */
}
*html #page{
    height:100%; /* для ie6 и ниже */
}

#header{
    background:#ccc;
}

#page-clear{
    clear:both;
    height:100px; /* >= высоте подвала */
}

#footer{
    background:#999;
    height:100px; /* высота подвала */
    margin-top:-100px; /* = высоте подвала */
}
</style>
</head>
<body>

<div id="page"><!– в этот блок помещаяется _всё_, кроме подвала 
 и растягивается на 100% –>
 
 <div id="header">шапка</div>
 
 <div id="content">контент</div>
 
 <div>ещё че-нибудь :)</div>
 
 <div id="page-clear">
  <!– здесь пусто.
   Как ты помнишь, у нас #page растянут на весь экран.
   Этот блок нужен, что бы футер, который мы поднимает за счет отрицательного
   margin'а не налезал на содержимое страницы. Он как бы "компенсирует" этот
   сдвиг.
  –>
 </div>
 
</div>

<div id="footer">подвал</div>

</body>
</html>

при этом помни, что в соответствии со стандартом CSS значения margin, padding и border не входят в общие width и height. Т.е. если ты сделаешь так:


#page{
    height
    width:100%;
    padding:10px;
    margin:10px;
    border:10px solid #fff;
}

у тебя получится прокрутка в 60px ((10px+10px+10px)*2 стороны) сверху и справа

bnret

Сообщения: 1 Репутация: N Группа: Кто попало

7 декабря 2009 г. 22:44, спустя 457 дней 10 часов 37 минут

О, вроде работает. Тимур, как всегда, на высоте. Ну как тут без плюсика обойтись … )))
Troy

Сообщения: 2532 Репутация: N Группа: Джедаи

7 декабря 2009 г. 21:45, спустя 23 часа 57 секунд

bnret, плагиат )
phpdude

Сообщения: 26646 Репутация: N Группа: в ухо

8 декабря 2009 г. 5:30, спустя 7 часов 45 минут 11 секунд

О, вроде работает. Тимур, как всегда, на высоте. Ну как тут без плюсика обойтись … )))
обойдешься, твой первый плюсик ты сможешь поставить через 49 сообщений)

Сапожник без сапог

Пожалуйста, авторизуйтесь, чтобы написать комментарий!

Привязка подвала к низу страницы

Войти