Упорядочивание блоков по вертикали

[alhames]

Имеется код:

<style>
    body {margin: 0}
    #top {width: 600px; background-color: #666633; height: 100px}
    #middle {width: 600px; background-color: #999966; height: 100%}
    #bottom {width: 600px; background-color: #666633; height: 50px}
</style>
<center>
    <div id="top">&nbsp;</div>
    <div id="middle">&nbsp;</div>
    <div id="bottom">&nbsp;</div>
</center>

Требуется, чтоб блок "bottom" был привязан к нижнему краю браузера, блок "top" - к верхнему, а блок "middle" должен заполнить пространство между ними. причем два обязательных условия: 1) привязка не должна зависить от разрешения экрана пользователя; 2) привязка не должна зависить от браузера пользователя.

В приведенном коде в браузерах IE и Opera относительная высота ("100%") игнорируется, а в FF она присваивает значение полной высоты экрана браузера (т.е. происходит смещение за границы экрана ровно на высоту блоков "top" и "bottom").

Собственно, какие есть варианты решения?

@темы: HTML, Оптимизация, CSS, Веб-дизайн

Comments

[La personne mystique]

diary.ru/~html/p41570760.htm - тут немного информации к размышлению, хотя в итоге там пришли к выводу, что без использования JS это невозможно.

[Гость]

<style>   
body {margin: 0}   
#top {
    width: 600px; 
    background-color: #666633; 
    height: 100px;
    position: absolute; top: 0px;
}   
#middle {
    width: 600px; 
    background-color: #999966; 
    position: absolute; top: 100px; bottom: 50px;
}   
#bottom {
    width: 600px; 
    background-color: #666633; 
    height: 50px;
    position: absolute; bottom: 0px;
}
</style>

<center>   
<div id="top">first-blokc</div>   
<div id="middle"><h2>middle</h2></div>   
<div id="bottom">the end;</div></center>

[Runables]

почему нельзя использовать обычную таблицу?

[alhames]

La personne mystique ну, я не говорил, что это нужно реализовать только средствами html/CSS - и JS тоже сойдет =)
Сейчас гляну..

Гость тега [code], к сожалению, у нас нет (хотя я месяца четыре назад просил его сделать..). Потому код обрабатываем тут - http://diary.photonid.com/hglt/

Предложенный вариант работает в Opera и FF, но в IE 7 отображается вот так:

Причина тому - не заданная высота среднего блока - фон применяется только к той части, где есть текст. И еще, "position: absolute;" предполагает, что блок находится внезависимости от остальных элементов страницы, т.е. если текст в среднем болке будет больше рамера экрана (по высоте), то абсолютный блок его перекроет..

[La personne mystique]

position: absolute; bottom: 0px;

вот это вызовет проблему - дело в том, что при абсолютном позиционировании "bottom" отсчитывается не от низа документа, а от нижней границы экрана. (не помню, на какие браузеры это распространяется, но точно - на Оперу 8-9.)

[La personne mystique]

ну, я не говорил, что это нужно реализовать только средствами html/CSS - и JS тоже сойдет =)

тогда можно покопаться в CSSке главной страницы diary.ru - там используется примерно такая схема

[alhames]

Runables потому что необходимо сделать полностью блочный дизайн (без table вообще) =)

La personne mystique

diary.ru/~html/p41570760.htm - тут немного информации к размышлению

Весьма позновательная дисскусия у вас там
Но ответа я так и не нашел.. Зато пришла вот такая мысль - а что если в средний блок вставить прозрачную картинку с шириной в 1px и автоматически подставляемой высотой?
Вот тока теперь вопрос: как генерировать высоту?

тогда можно покопаться в CSSке главной страницы diary.ru - там используется примерно такая схема

Эээ.. Я не помню ни одной страницы на дайри, которая была б меньше размеров экрана, но, если учесть, что у меня 1024х768, то при большем разрешении это вполне возможно..
А вот копаться в CSS - тяжело будет, однако.. %)
А кто, собственно, писал CSS для дайри? Может спросить проще?