Нужна помощь с версткой

19 сообщений

#15 лет назад

Всем доброго времени суток.
Есть такая страничка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<TITLE>Заголовок</TITLE>
<STYLE type="text/css">
body,
html {
margin:0;
padding:0;
background:#a7a09a;
color:#000;
}
body {
min-width:750px;
}
#wrap {
background:#99c;
margin:0 auto;
width:750px;
}
#header {
background:#ddd;
}
#header h1 {

padding:5px;

margin:0;

}
#main {
background:#9c9;
float:left;
width:500px;
}
#main h2, #main h3, #main p {
padding:0 10px;

}
#sidebar {
background:#99c;
float:right;
width:240px;
}
#sidebar ul {
margin-bottom:0;

}

#sidebar h3, #sidebar p {
padding:0 10px 0 0;

}
#footer {
background:#cc9;
clear:both;
}
#footer p {
padding:5px;
margin:0;

}
</STYLE>
</HEAD>
<BODY>

<DIV id="wrap">
<DIV id="header"><H1>Пример простого блочного шаблона страницы</H1></DIV>
<DIV id="main">
<H2>Колонка 1</H2>
<P>Тут текст</P>
</DIV>
<DIV id="sidebar">
<H3>Колонка 2</H3>
<P>Тут текст</P>
<UL>
<LI><A href="#">Ссылка 1</A></LI>
</UL>
</DIV>
<DIV id="footer">
<P>Подвал</P>
</DIV>
</DIV>

</BODY></HTML>

Как сделать так, чтобы страничка растягивалась на всю высоту браузера даже если на ней текста пару строчек.

2195 сообщений

#15 лет назад

ссылка

272 сообщения

#15 лет назад

Теги пишите в нижнем регистре.

441 сообщение

#15 лет назад

Я использую несколько модифицированный вариант того, что предложено на xhtml.ru
Подробно код приводить не буду, но основная идея такая:

<html>...<body>

<div id="wrapper">

  ....здесь контент

  <div id="reserve"></div>

</div>

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

</body></html>

В css:

html, body {

  height: 100%;

}

#wrapper {

  height: 100%;

}

#reserve {

  height: 200px;

  border-right: 1px solid #ccc; /* иногда приходится добавлять бордер в цвет фона, чтобы IE7 не "схлопывал" этот элемент до нулевой высоты */

}

#footer {

  height: 200px;

  margin-top: -200px;

}

В общем, смысл в том, что элемент #reserve резервирует место под #footer, т.к. в некоторых случаях с padding'ом у #wrapper'а возникают трудности.

2195 сообщений

#15 лет назад

sukebe
Пустой div некрасиво. На xhtml.ru почему-то нет самого удобного варианта, когда position:absolute для footer'а не от body, а внутри wrapper'а.

441 сообщение

#15 лет назад

Цитата ("Sir_Michael"):

sukebe
Пустой div некрасиво. На xhtml.ru почему-то нет самого удобного варианта, когда position:absolute для footer'а не от body, а внутри wrapper'а.

Точно :!:
Блин, интересно, почему я этим вариантом не пользуюсь? :?: :?: :?: Совсем, видать, плохой стал

19 сообщений

#15 лет назад

Спасибо всем. Вопрос закрыт.