Доброго времени суток! Знаю, что вопрос растягивания "div'ов" на 100% по вертикали стоит давно, перечитал только что, всё что нашёл на этом форуме и груду инфы из других источников! Честно говоря, ничего толкового не нашёл, решил попробовать сделать что-то своё... Сварганил кое-как черновой вариант странички, набитый разнообразными кусками кода, в т.ч. JS, которая растягивается минимум на 100% окна браузера, работает в IE6/FF3.5/Opera10. И всё бы хорошо, да вот одно плохо, почему-то если один слой, растянут (например текстом) больше другого, то второй слой почему-то чуть короче предыдущего! Не знаю, как с этим бороться! Если слой "Контент" растянут - то слой "меню" тоже растягивается, но почему-то не полностью, т.е. он чуть короче слоя "контент". И как я не пробовал с этим бороться - ничего не получается! При обратных действиях (растягивание слоя "меню" [как в приложенном примере кода]) - картина аналогичная, т.е. слой "контент" тоже растягивается, только почему-то чуть короче чем слой "меню". 

Подскажите пожалуйста, в чём проблема? И как её решить!?   

P.S. Заранее извиняюсь за "разбросанный код, вариант писался сугубо черновой, лишь для отладки положения слоёв, код не входило в мои планы. Благодарю за внимание!

Присоединённый файл ( Кол-во скачиваний: 6 )
 index.zip 1,88 Kb

http://xhtml.ru/2005/12/12/body_height_research/

Не помогло...

Я в шоке!   

Попробовал сделать вот такой вот код... 



Только было обрадовался... Но радость быстро закончилась, как всегда, IE6 всё запоганил! Часть "Меню" и "Контент" в нём отображается почему-то где-то по середине страницы!!!

Неужели нет способа без страшных "махинаций" сделать документ по шаблону: "хедер, меню/контент, футер"??

а это не подойдёт?

http://www.alexilin.ru/5-sovetov-po-html-i-css/

http://www.alexilin.ru/5-sovetov-po-html-i-css/ - это тоже читал, не помогает! Посмотрите пожалуйста вложенный файл, вся загвоздка в том, что нужно сделать именно так:

1. Сверху хедер (заголовок), допустим, 100px;
2. Дальше слева идёт меню, справа от меню - слой для контента; Меню 200px; Контент всё оставшееся пространство;
3. Снизу должен идти футер (он же "подвал"), высотой допустим 50px;

Проблема в том, что разнообразные хаки типа "подложить фоновую картинку" и пр. - не прокатывают! Нужно конкретно иметь 2 слоя одинаковой высоты! Если 1 слой растянулся до (допустим) 500px; то и второй слой (меню/контент) должен приобрести аналогичную высоту!

Перепробовал всё, что приходило в голову...

Результаты:
а) Появлялась полоса прокрутки (на мой взгляд, совершенно неуместная, чуть ниже футера появлялось пустое место равное его высоте;
б) Начал вёрстку на голых таблицах и всё бы хорошо, но... IE 6, 7 - отлично, даже FF норм! А Opera тупанула, и style="height:100%"; у таблиц - не понимает...
в) Всё на своих местах, но футер начинается за видимой частью экрана, что бы его увидеть - необходима прокрутка... Не годиться!
г) Находил ещё какое-то решение (уже не помню), но как всегда подвёл эксплорер! У него полоса прокрутки становилась бесконечной (вниз)

В общем одним словом уже 4ые сутки перебираю всё, что попадается в Google и Яndex, а воз и ныне там... В прикреплённом в 1-ом посте файле - была попытка реализовать всё через JavaScript, но даже он не помогает! Элемент имеющий меньшую высоту (по заполнению) почему-то всегда чуть короче! Попытался переделать код, хотел сделать примерно так:

если слой 1.высота > слой 2.высота
{
слой 2.высота = слой 1.высота;
} в противном случае {
слой 1 высота = слой 2.высота
}

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

Я просто в ужасе!   

как же всё просто получается, если не корячится со слоями, а сделать по человечески таблицей

http://matthewjamestaylor.com/blog/equal-h...ns-2-column.htm

Всё бы хорошо, но в последнем примере - высота столбцов просто равная... Они не растягиваются на весь экран, если не заполнены контентом! Что есть не очень хорошо!

что-то ТС таблицы не помогли

Скажите пожалуйста, эта задача вообще решаема? Можно как-нибудь сделать, например height:100%-150px для слоя? Через JS или на чистом CSS - не принципиально!

Добавлено @ 20:38
Главное при этом ещё сделать 2 слоя одинаковой высоты! Только не псевдо высоты, с помощью фоновой подложки и пр. "махинаций", а именно одинаковой высоты?

Это сообщение отредактировал(а) WolfAlone - 17.10.2009, 20:43

по поводу сделать сайт по высоте минимум на 100% - http://cssplay.co.uk/layouts, по поводу столбцов одинаковой высоты - ссылка выше