Как создать HTML-страницу CSS с заголовком, нижним колонтитулом и содержимым - PullRequest
Новая
       22

Как создать HTML-страницу CSS с заголовком, нижним колонтитулом и содержимым

1 голос
/ 16 декабря 2008

На странице 3 части.

  1. Заголовок, имеющий неизвестное содержимое во время разработки, так как он заполняется текстом во время выполнения. Весь текст должен отображаться, без полос прокрутки. (Я думаю, height: 100% делает это)

  2. Контент, контент должен заполнять страницу от нижнего колонтитула до верхнего колонтитула. если в контенте больше текста, который можно отобразить, то должны быть доступны полосы прокрутки.

  3. Footer. Нижний колонтитул должен иметь высоту 25px и всегда находиться внизу области просмотра.

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

Размер области содержимого должен изменяться при изменении размера окна, но нижний колонтитул остается неизменным, то есть фиксируется в нижней части.

Все ширины будут 100%

Ответы [ 2 ]

2 голосов
/ 16 декабря 2008

Это может быть боль в заднице, если вы хотите нижний колонтитул в нижней части окна. Единственный способ сделать это и заставить его работать в кросс-браузерном режиме - это использовать страшный макет таблицы - и, прежде чем откусить голову, макеты таблиц осуждаются - большое время.

Легко расположить верхний колонтитул и содержимое ... но, насколько я знаю, пока не нижний колонтитул, я нашел только 2 способа позиционирования нижнего колонтитула в нижней части окна (в отличие от в нижней части документа, который может быть на полпути вверх по окну для коротких документов), 1 использует Javascript для ссылки на Window.Height, а другой использует таблицы (недовольный, но простой способ сделать это).

До этого момента я еще не видел CSS, который надежно делает это во всех браузерах. Мне было бы очень интересно увидеть CSS, который делает это ...

2 голосов
/ 16 декабря 2008

Заголовок: не указывайте высоту. Div будет автоматически изменяться в соответствии с высотой их содержимого

Содержимое: укажите нижнее поле: 25 пикселей, чтобы нижний колонтитул не перекрывался

Нижний колонтитул: положение: исправлено; высота: 25px

Вам придется искать способы имитации положения: исправлено для IE <7. см., Например, </p>

Как заставить плавающий нижний колонтитул придерживаться нижней части области просмотра в IE 6?

...