Резиновая вёрстка по высоте...

Денисон · 25.03.2007, 23:43

С резиной по ширине в принципе всё понятно, а вот что у нас по высоте?). Думаю многие встречались с проблемой прижатия нижнего колонтитула фиксированной высоты к низужке окна, не зависимо от контента.
Я вот добился, много парясь и вычитывая, но добился эффекта (шапка фиксированной высоты, тело резиновое, низушка фиксированной высоты прижате к низу). Но никак, никак не могу прилепить левую менюшку...

Вот код того, что я добился...

PHP код:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

    "http://www.w3.org/TR/html4/loose.dtd">



<html>



<head>

  <title>Height 100%</title>



<style type="text/css" media="all">



* {

 margin: 0;

 padding: 0;

 border: 0;

}



html {

 height: 100%;

}



body {

 min-height:100%;

 height: 100%;

}



div.page {

 width: 100%;

 margin: auto;

 height: auto !important;

 min-height:100%;

 height: 100%;

 background:#e0ecff;

}





div.header {

 background: #f8deff;

 height: 100px;

}



/*гарантия того что футер не налезет на контент*/

div.footer_guarantor {

 height: 30px;

 clear: all;

}



div.footer {

 margin: auto;

 margin-top: -30px;

 width: 100%;

 height: 30px;

 clear: all;

 background: #deffe1;

}



</style>

</head>



<body>

<div class="page">

  <div class="header">Header</div>

  <div style="border:1px solid red; background:#fff;">body</div>

  <div class="footer_guarantor"></div>

</div>

<div class="footer">Footer</div>





</body>



</html>

Есть только один вариант который я нашёл. Но он подходит только если фон левой менюшки, это картинка, которая повторяется только по высоте...
Т.е. прописываем в классе page следующее

PHP код:


			
background-image:url('image.gif'); background-repeat:repeat-y; background-position:left;

Народ, помогите, думаю не одному мне это надо...

Денисон добавил [date]1174855944[/date]:
Извените за беспокойство. Проблему решил извращённым путём. Вот код, может кому надо будет...
Проверял, работает в принципе везде =)

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title>Height 100%</title>

<style type="text/css" media="all">

* {
 margin: 0;
 padding: 0;
 border: 0;
}

html {
 height: 100%;
}

body {
 min-height:100%;
 height: 100%;
}

div.header {
 position:absolute;
 top:0px;
 left:0px;
 background: #f8deff;
 height: 100px;
 width: 100%;
}

/*гарантия того что футер не налезет на контент*/
div.footer_guarantor {
 height: 30px;
 clear: all;
}

div.footer {
 margin: auto;
 margin-top: -30px;
 width: 100%;
 height: 30px;
 clear: all;
 background: #deffe1;
}

</style>
</head>

<body>
<div class="header">Header</div>
<table border="0" cellspacing="0" cellpadding="0" style="height:100%; width:100%; background:#e0ecff;">
  <tr>
    <td align="left" valign="top" style="width:250px; border-right:1px solid red;padding-top:100px;">
      Left menu
      <div class="footer_guarantor"></div>
    </td>
    
    <td align="left" valign="top" style="padding-top:100px;">
      Body
      <div class="footer_guarantor"></div>
    </td>
  </tr>
</table>
<div class="footer">Footer</div>
</body>

</html>

apelsin3000 · 02.07.2007, 17:53

а зачем дивами? почему не таблицей?.

Денисон · 02.07.2007, 18:03

apelsin3000, Ты бы сначало по эксперементировал прежде чем задавать такой вопрос. Глядишь сам себе и ответил бы)

Мерлин · 03.07.2007, 01:14

Денисон, как я уже писал - оптимальный ответ - комбинация блочная вёрстка + табличная.
apelsin3000, ответь сам на свой вопрос прочитав эти статьи:
http://www.weblancer.net/articles/3.html
http://www.weblancer.net/articles/4.html

kost · 07.07.2007, 22:31

Зачем выкладывать огромные куски кода, а не ссылки на страницы, где это реализовано?

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Выравнивание по высоте (вертикали)	Отшельник	HTML, CSS, JavaScript	5	28.08.2008 18:11
растяжение дизайна по высоте	Speed4U	HTML, CSS, JavaScript	4	07.02.2007 09:36
Опера и растяжка таблиц по высоте	rubanok	HTML, CSS, JavaScript	3	14.12.2006 18:23
Проблемы с css (резиновая вёрстка)	PavelCh	HTML, CSS, JavaScript	5	19.09.2006 12:47
Css. Резиновая верстка	Катя	HTML, CSS, JavaScript	2	06.08.2006 15:46

25.03.2007, 23:43	#1
Денисон	С резиной по ширине в принципе всё понятно, а вот что у нас по высоте?). Думаю многие встречались с проблемой прижатия нижнего колонтитула фиксированной высоты к низужке окна, не зависимо от контента. Я вот добился, много парясь и вычитывая, но добился эффекта (шапка фиксированной высоты, тело резиновое, низушка фиксированной высоты прижате к низу). Но никак, никак не могу прилепить левую менюшку... Вот код того, что я добился... PHP код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Height 100%</title> <style type="text/css" media="all"> * { margin: 0; padding: 0; border: 0; } html { height: 100%; } body { min-height:100%; height: 100%; } div.page { width: 100%; margin: auto; height: auto !important; min-height:100%; height: 100%; background:#e0ecff; } div.header { background: #f8deff; height: 100px; } /гарантия того что футер не налезет на контент/ div.footer_guarantor { height: 30px; clear: all; } div.footer { margin: auto; margin-top: -30px; width: 100%; height: 30px; clear: all; background: #deffe1; } </style> </head> <body> <div class="page"> <div class="header">Header</div> <div style="border:1px solid red; background:#fff;">body</div> <div class="footer_guarantor"></div> </div> <div class="footer">Footer</div> </body> </html> Есть только один вариант который я нашёл. Но он подходит только если фон левой менюшки, это картинка, которая повторяется только по высоте... Т.е. прописываем в классе page следующее PHP код: `background-image:url('image.gif'); background-repeat:repeat-y; background-position:left;` Народ, помогите, думаю не одному мне это надо... Денисон добавил [date]1174855944[/date]: Извените за беспокойство. Проблему решил извращённым путём. Вот код, может кому надо будет... Проверял, работает в принципе везде =) Код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Height 100%</title> <style type="text/css" media="all"> * { margin: 0; padding: 0; border: 0; } html { height: 100%; } body { min-height:100%; height: 100%; } div.header { position:absolute; top:0px; left:0px; background: #f8deff; height: 100px; width: 100%; } /гарантия того что футер не налезет на контент/ div.footer_guarantor { height: 30px; clear: all; } div.footer { margin: auto; margin-top: -30px; width: 100%; height: 30px; clear: all; background: #deffe1; } </style> </head> <body> <div class="header">Header</div> <table border="0" cellspacing="0" cellpadding="0" style="height:100%; width:100%; background:#e0ecff;"> <tr> <td align="left" valign="top" style="width:250px; border-right:1px solid red;padding-top:100px;"> Left menu <div class="footer_guarantor"></div> </td> <td align="left" valign="top" style="padding-top:100px;"> Body <div class="footer_guarantor"></div> </td> </tr> </table> <div class="footer">Footer</div> </body> </html>

02.07.2007, 17:53	#2
apelsin3000	а зачем дивами? почему не таблицей?.

02.07.2007, 18:03	#3
Денисон	apelsin3000, Ты бы сначало по эксперементировал прежде чем задавать такой вопрос. Глядишь сам себе и ответил бы)

03.07.2007, 01:14	#4
Мерлин	Денисон, как я уже писал - оптимальный ответ - комбинация блочная вёрстка + табличная. apelsin3000, ответь сам на свой вопрос прочитав эти статьи: http://www.weblancer.net/articles/3.html http://www.weblancer.net/articles/4.html

07.07.2007, 22:31	#5
kost	Зачем выкладывать огромные куски кода, а не ссылки на страницы, где это реализовано?