Адалт кутюрье
С нами с 16.04.06
Сообщения: 1322
Рейтинг: 827
|
 Добавлено: 23/04/08 в 11:19 |
Интересует кроссбраузерный блочный вариант следующей структуры..
| Код: | [шапка]
[контент]
[футер] |
в чём собственно дело..Мне нужно, чтобы при любом количестве контента (даже если его попросту нету) пустой блок, шапка была прижата к верху, а футер - к низу экрана. Ну и есесна, когда контента больше, чем на эран, средний блок расширялся...
Если выставить блоку "контент" высоту 100%, то появляетбся лишний скролл, равный высоте шапки+футера..Как организовать кроссбраузерно без скролла - не знаю..
Таблицей это было бы так:
| Код: | <table height="100%">
<tr><td>шапка</td></tr>
<tr><td height="100%">контент</td></tr>
<tr><td>футер</td></tr>
</table> |
то есть вся таблица - на высоту экрана, а средняя ячейка занимает всё свободное просстранство между строкой шапки и футера.
Всем рейтинг=) Нужен кроссбраузерный, не слишком заморочный вариант..Ну и сорри, коли нупский вопрос.
|
|
|
|
| |
Адалт кутюрье
С нами с 16.04.06
Сообщения: 1322
Рейтинг: 827
|
| Добавлено: 23/04/08 в 14:14 |
Ребят, убил пол дня на изучение данного вопроса..В сети - море вариантов..Кроссбраузерного толком не нашёл ни одного..Но всё не так уж плохо - из того что было, я кое-что слепило=)
| Код: |
<!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><title>CSS</title>
<link rel="STYLESHEET" type="text/css" href="style.css">
</head>
<body>
<div id="content">
<div id="top">top here</div>
<div id="otstup">content </div>
</div>
<div id="footer"> footer </div>
</body>
</html> |
а тут КСС
| Код: | html, body {
margin:0;
padding:0;
width:100%;
height:100%;
}
#top { position: relative; height: 50px; background-color: Blue; width: 600px; margin-left: auto; margin-right: auto;}
#content { position: relative; min-height: 100%; background-color: Aqua; width: 600px; margin-left: auto; margin-right: auto;}
#otstup { padding: 0 0 50px 0;}
* html #content { height: 100%;}
#footer { position: relative; margin-top: -50px; height: 50px; background-color: Lime; width: 600px; margin-left: auto; margin-right: auto;} |
Иотго мы получаем вышеописанную структуру, отображается кроссбраузерно, всегда тянеться на 100% высоты моника,футер всегда внизу экрана, если контента много, больше, чем экран - среднее поле тянеться без проблем, всё аккуратно увеличиваеться.
Юзайте, ну и если косяки найдёте - сюда плиз, я не пертендую на полную правильность кода..Пока ошибок не нашёл.
|
|
|
|
| |
Адалт кутюрье
С нами с 16.04.06
Сообщения: 1322
Рейтинг: 827
|
| Добавлено: 23/04/08 в 14:17 |
зы: на мастере футер не прижимаеться, если контента мало 
|
|
|
|
| |
Текстовая реклама в форме ответа
Заголовок и до четырех строчек текста
Длина текста до 350 символов
Купить рекламу в этом месте! |
