Нужно выравнить высоту блоков по высоте окна браузера, если высота содержимого в нём меньше окна браузера, либо по высоте содержимого, если оно больше окна браузера. Надеюсь, все сейчас поняли, что я тут написал. До сих пор, у меня такое мистическое чувство, что это сделать невозможно. Распишу пошагово всё что я пробовал делать. Шаг 1: Сделал пробную пустую вёрстку: HTML: <style type='text/css'> <!-- * { padding: 0; margin: 0; } html { height: 100%; } body { height: 100%; border: 5px solid red; } --> </style> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="MESMERiZE" /> <title>Untitled 1</title> </head> <body> text text text text text text text text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text text text text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text text text text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text text text text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text text text text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text text text text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text text text text text text text text text text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text text text text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text text text text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text text text text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text text text text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text text text text text text text texttext </body> </html> Как видите, при развёрнутом окне всё нормально, но если его сузить и опустить прокрутку вниз, то видно что body имеет высоту окна браузера, а не своего содержимого. Шаг 2: Выяснил опытным путём, что если в html прописать height: 100%, а в body прописать min-height: 100%, то всё выглядит идеально - при развёрнутом окне, body обтикает окно браузера, как показано выше, а при суженном окне браузера - обтекает текст. Шаг 3: Добавил в body ещё один блок с id="wrapper", в который засунул весь текст. Его CSS выглядит так: #wrapper { min-height: 100%; border: 5px solid green; } Как видите, тут уже всё совсем не идеально. Мне пока не удалось заставить #wrapper принять форму body, так что наращивать ещё элементов пока не стал. Если прописать для #wrapper height: 100%, то выглядит это так: Я в отчаянии. Нужна помощь.
хз, чувак, могу только расстроить - в свое время подобную задачу так и не решил. просто сделал фон у body такой же как у wrapper, а footer привязал к низу. может у тебя тоже такое возможно?
Не возможно, потому что я затеял делать резиновый футер, привязанный к резиновой половине контента. Абсолютное позиционирование здесь не прокатит. Проблема с высотой на самом деле достаточно обширно-применимая и часто-запрашиваемая, поэтому хотелось бы разобраться с ней раз и навсегда. Надеюсь на коллективный разум.
Нагуглил тут интересное решение с кучей хаков: http://blog.sjinks.pro/test/3col/3col_h100.html Осталось вкурить как оно работает и приладить к своему проекту...