Основная идея состоит в том,

чтобы сначала рассмотреть возможность настройки контейнера div во внешнем слое с идентификатором, установленным в #container, чтобы его высота соответствовала высоте окна браузера, а затем установить элемент div #footer в качестве дочернего элемента div # контейнер и используйте абсолютное позиционирование, чтобы прикрепить его к нижнему концу #container для достижения желаемого эффекта.

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

Реализация кода

: сначала рассмотрим структуру HTML. HTML-код этой демонстрационной страницы очень прост.

body,html {
маржа: 0;
заполнение: 0;
шрифт: 12 пикселей/1,5 Arial;
высота: 100%;
}
#контейнер {
минимальная высота: 100%;
положение: относительное;
}
#содержание {
отступ: 10 пикселей;
отступ снизу: 60 пикселей;
/* 20px(размер шрифта)x2(высота строки) + 10px(отступ)x2=60px*/
}
#footer {
позиция: абсолютная;
внизу: 0;
отступ: 10 пикселей 0;
цвет фона: #AAA;
ширина: 100%;
}
#footer h1 {
шрифт: 20 пикселей/2 Arial;
маржа: 0;
отступ: 0 10 пикселей;
}
1: Сначала установите высоту (атрибут высоты) элементов html и body на 100% (строка 5). Это сначала гарантирует, что высота корневого элемента заполнит все окно браузера, а затем высота #container. заполнить все окно браузера. Что касается того, почему элементы html и body устанавливаются одновременно, то это потому, что Firefox и IE считают корневой элемент разными, поэтому они установлены здесь.

2: Затем установите высоту #container на 100% (строка 8), но обратите внимание, что здесь вместо обычного атрибута высоты используется атрибут «min-height». Это потому, что мы должны учитывать, что if # If содержимое. в содержимом увеличивается и его высота превышает высоту окна браузера, то, если высота #container по-прежнему равна 100 %, #footer по-прежнему будет располагаться в нижней части окна браузера, закрывая таким образом содержимое #content. Цель использования атрибута min-height — сделать высоту #container «не ниже» высоты окна браузера. Когда содержимое внутри него увеличивается, его высота также увеличивается.

Однако следует отметить, что в Firefox и IE7 поддерживается атрибут min-height, а в IE6 атрибут min-height не поддерживается. Однако «случайно» заключается в том, что в IE6 атрибут min-height будет. интерпретироваться как атрибут высоты, но эффект атрибута высоты в IE6 — это эффект, который изначально должен иметь min-height. То есть в IE6 высота дочернего div будет увеличивать высоту родительского div. . Таким образом, это может привести к желаемому эффекту в IE6, IE7 и Firefox.

3: Затем установите #container на относительное позиционирование (строка 9), чтобы сделать его ссылкой на позиционирование #footer внутри него, который является так называемым «самым последним позиционированным родительским элементом».

4: Затем установите для #foooter абсолютное позиционирование (строка 17) и вставьте его в нижнюю часть #container (строка 18).

5: Но обратите внимание, что если мы вставим #foooter внизу #container, он фактически перекроется с элементом #content выше. Чтобы не закрывать содержимое #content, мы устанавливаем его в #contetn, удалив отступы. на нижней стороне и сделав значение padding-bottom равным высоте #footer (строка 13), вы можете гарантировать, что текст #content не будет отображаться. При расчете этой высоты обратите внимание на метод расчета, указанный в. комментарии в коде (строка 14).