Содержание
Высоту header хочется сохранить фиксированной вне зависимости от размеров окна.
Единственное перенес обнуление padiing и margin из звездочки в body,html потому что иначе если допустим в средний див добавить ul, то значки заползают на первый див.
Хотя немного странно, что нет более простого, чем вывод шапки из потока, способа, потому что по горизонтали с display: inline-table такой проблемы не возникает.
Звёздочка — это универсальный селектор, применяется ко всем элементам на странице.
В разметке, показанной ниже, я пытаюсь заставить контент div растягиваться до конца страницы, но он растягивается только при наличии содержимого для отображения. Причина, по которой я хочу сделать это, заключается в том, что вертикальная граница по-прежнему отображается на странице, даже если нет содержимого для отображения.
Вот мой HTML:
И мой CSS:
18 ответов
86 Решение Jason Hernandez [2009-02-23 23:09:00]
Ваша проблема заключается не в том, что div не на высоте 100%, а в контейнере вокруг него нет. Это поможет в браузере, который, как я подозреваю, вы используете:
Вам, возможно, потребуется отрегулировать отступы и поля, но это даст вам 90% пути. Если вам нужно заставить его работать со всеми браузерами, вам придется немного поработать с ним.
На этом сайте есть несколько отличных примеров:
Я также рекомендую перейти на http://quirksmode.org/
27 Gima [2014-06-02 05:08:00]
Я постараюсь ответить на вопрос непосредственно в названии, вместо того, чтобы быть приглушенным, чтобы придерживаться нижнего колонтитула в нижней части страницы.
Сделать div в нижней части страницы, если для заполнения доступного вертикального окна просмотра браузера недостаточно содержимого:
Демо на (перетащите маркер кадра, чтобы увидеть эффект): http://jsfiddle.net/NN7ky
(вверху: чистый, простой. downside: требуется flexbox — http://caniuse.com/flexbox)
HTML:
CSS
ta-da — или я просто слишком сонный
12 Kevin Read [2008-09-29 07:47:00]
Попробуйте сыграть со следующим правилом css:
Измените высоту в соответствии с вашей страницей. высота упоминается дважды для совместимости с браузером.
5 Owen [2008-09-29 07:44:00]
вы можете взломать его с помощью min-height
4 Anjisan [2009-07-26 02:44:00]
Попробуйте Ryan Fait "Липкий нижний колонтитул",
Работает через IE, Firefox, Chrome, Safari и, предположительно, Opera тоже, но не тестировал это. Это отличное решение. Очень легко и надежно реализовать.
Липкий нижний колонтитул с фиксированной высотой:
HTML-схема:
CSS
3 Gene [2008-09-29 10:00:00]
Свойство min-height не поддерживается всеми браузерами. Если вам нужно, чтобы #content увеличил его высоту на более длинных страницах, свойство height сократит его.
Это немного взломанный, но вы можете добавить пустой div с шириной 1px и высотой, например. 1000px внутри вашего #content div. Это приведет к тому, что контент будет не менее 1000 пикселей в высоту и по-прежнему позволит более длинному контенту увеличить высоту при необходимости.
Хотя это не так элегантно, как чистый CSS, небольшая часть javascript может помочь в этом:
задача состоит в том, чтобы задать блок div до конца страницы, типо копирайт, как и на этой странице, однако если на странице текста мало, то этот блок не дотягивает до нижнего края. Даже если устанавливаю отрицательный margin-bottom все равно остается маленькая полосочка
Загрузка...
