Установить высоту содержимого, нижнего колонтитула, который расширяет остальную высоту браузера

#css #html #footer #sticky-footer

#css #HTML #нижний колонтитул #липкий нижний колонтитул

Вопрос:

Итак, я знаю, что первая мысль — «Липкий нижний колонтитул», но на самом деле это не так. Переменной является высота нижнего колонтитула.

У меня есть страница, на которой основное содержимое находится на расстоянии 200 пикселей от верха … после содержимого мне нужно, чтобы нижний колонтитул расширялся до конца до оставшейся высоты браузера; будет фоновое изображение размером 1600 пикселей, которое будет repeat-x

Ответ №1:

Вот один трюк. Сделайте свой верхний, нижний и нижний колонтитулы такими, как обычно. Установите высоту нижнего колонтитула на 100% и присвоите ему position:fixed атрибут, и убедитесь, что вы не присваиваете ему атрибут top, bottom и т. Д. Это выведет нижний колонтитул «из потока», но оставит его там, где он был бы естественным (это удаляет все уродливые полосы прокрутки).

вы можете увидеть это в действии в демонстрационном примере здесь.

1. Вы знаете, единственные свойства CSS, в которых я был, но не уверен, — это свойства положения. Большое спасибо, Джозеф!

2. @dcolumbus Добро пожаловать. 🙂 Они действительно полезны, когда вы действительно к ним привыкнете. Рад, что смог помочь.

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

4. @RampantCreativeGroup На этом этапе такой вариант использования отличается от исходного сценария. В этом случае просто используйте обычный нижний колонтитул, который вообще не использует позиционирование. Так что да, в большинстве случаев это не работает, но только потому, что в большинстве случаев это обычные сценарии с обычными нижними колонтитулами, которые расширяются с помощью содержимого, как обычный элемент на странице. Теперь, если вам нужно и то, и другое для работы, обычно будет достаточно хорошего фона для элемента html, но, насколько я понимаю, в случае OP фон должен начинаться в верхней части нижнего колонтитула. Это уникальный случай (не говоря уже о взломе), который потребовал уникального решения.

Ответ №2:

Почему бы просто не сделать body background-image из нижнего колонтитула?

Затем вы можете настроить основное содержимое на любой фон, который вам нравится, и нижний колонтитул будет отображаться на остальной части страницы.

1. В изображении нижнего колонтитула есть градиент. Для правильного отображения страницы каждый раз, когда она отображается, она должна быть идеальной для пикселей. Вы бы заметили.

Ответ №3:

http://jsfiddle.net/JFtwD/25 / Вот как вы могли бы это сделать. Не знаю, лучшее ли это решение, но это решение.