Оформление от divas - "долен колонтитул, който винаги е най-отдолу"

Традиционно се използва таблично оформление, върху него е много лесно да се внедри всичко необходимо - винаги се прави таблица с размери 100%x100% и в нея отделно се разпределят клетки за заглавката (заглавието), средата (съдържанието) и дъното (долния колонтитул) на сайта. След това, за да подредим менюто, използваме друга таблица, друга таблица за подреждане на съдържанието и още една, и още една. С времето става скучно. Броят на таблиците прави кода труден за четене и бавен за зареждане (колкото повече елементи в DOM на документа, толкова по-бавно се изобразява от браузъра), да не говорим за теглото на страницата. Описвам метода, предложен по-долу, като вземам предвид Doctype 4.01 Strict или поне Transitional. Без doctype, ще трябва да се борите с "quirks mode" на различните браузъри.

Сигурен съм, че много са се опитвали да направят страницата на divs и съм сигурен, че много са имали проблеми с позиционирането на долния колонтитул:

Например, като знаем приблизителната височина на долния колонтитул (имам го 32 пиксела), ако посочим стила за блока #footer, тогава долният колонтитул ще бъде най-отдолу, но в случай на голямо количество съдържание ще бъде някъде сред него и ще се превърта заедно с него.

За да предотвратите това да се случи, би било хубаво да създадете блок, например #all, за всичко на страницата като цяло, с относително позициониране, включително действителното

Ако обаче нямаме достатъчно съдържание на страницата, тогава долният колонтитул се издига, така че да не е необходимо да се разтяга #all поне до цялата височина на екрана. Нека направим #all block height:100% и добавим html стила, body < височина: 100%; марж: 0; подплата: 0; > и наздраве, при нас всичко изглеждаше прекрасно. #all - разтяга цялата площ на екрана. Но със съдържанието се оказва кофти - при куп съдържание #all заема само показаната част, #footer в резултат също. Във всичкобраузъри, различни от IE6. В крайна сметка получихме това, с което започнахме. Ситуацията ще бъде коригирана от html>body #all < височина: авто; мин. височина: 100% > - което няма да засегне IE6, но ще разтегне правилно блока във всички други браузъри.

Можете да видите резултата на страниците на този блог. Ако премахна всичко ненужно, тогава получих това решение.