Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

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

Обсуждение темы Резиновая вёрстка по высоте... в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; С резиной по ширине в принципе всё понятно, а вот что у нас по высоте?). Думаю многие встречались с проблемой прижатия нижнего колонтитула ...


Закрытая тема
 
Опции темы
Старый 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">

* {
 
margin0;
 
padding0;
 
border0;
}

html {
 
height100%;
}

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

div.page {
 
width100%;
 
marginauto;
 
heightauto !important;
 
min-height:100%;
 
height100%;
 
background:#e0ecff;
}


div.header {
 
background#f8deff;
 
height100px;
}

/*гарантия того что футер не налезет на контент*/
div.footer_guarantor {
 
height30px;
 
clearall;
}

div.footer {
 
marginauto;
 
margin-top: -30px;
 
width100%;
 
height30px;
 
clearall;
 
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-ybackground-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>
 
Старый 25.03.2007, 23:43
Ссылки
Старый 02.07.2007, 17:53   #2
а зачем дивами? почему не таблицей?.
 
Старый 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
Зачем выкладывать огромные куски кода, а не ссылки на страницы, где это реализовано?
 
Старый 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


Текущее время: 13:27. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Дизайнерский форум