Растянуть блок до конца страницы

Высоту 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)

Читайте также  Прошивка teclast x80 power

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 все равно остается маленькая полосочка

Ссылка на основную публикацию
Adblock
detector