У меня была следующая страница (deadlink:), в http://www.workingstorage.com/Sample.htm
которой есть нижний колонтитул, который я не могу разместить внизу страницы.
Я хочу, чтобы нижний колонтитул
- придерживаться нижней части окна, когда страница короткая и экран не заполнен, и
- оставайтесь в конце документа и двигайтесь вниз, как обычно, когда содержание превышает несколько экранов (вместо того, чтобы перекрывать контент).
CSS унаследован и сбивает с толку меня; Кажется, я не могу изменить его должным образом, чтобы установить минимальную высоту содержимого или заставить нижний колонтитул перейти к нижней части.
flexbox
.Ответы:
Простой способ сделать тело
100%
вашей страницы, сmin-height
из100%
тоже. Это прекрасно работает, если высота вашего нижнего колонтитула не меняется.Дайте нижнему колонтитулу отрицательный отступ:
источник
box-sizing: border-box;
от тела [и#container
].Я разработал довольно простой способ прикрепить нижний колонтитул внизу, но, как и большинство распространенных методов, вам нужно настроить его так, чтобы он соответствовал росту вашего нижнего колонтитула.
ПОСМОТРЕТЬ ДЕМО
Метод Flexbox:
Этот метод ниже использует «хитрость», помещая
::after
псевдоэлемент вbody
, и устанавливая его так, чтобы он имел точную высоту нижнего колонтитула, чтобы он занимал точно такое же пространство, что и нижний колонтитул, поэтому, когда нижний колонтитул расположенabsolute
над ним, казалось бы, что нижний колонтитул действительно занимает место и устраняет негативные последствия его абсолютного позиционирования (например, перебирая содержимое тела)position:absolute
Метод: (не позволяет динамическую высоту нижнего колонтитула)Метод раскладки таблицы:
источник
display: table
display: table-row
display:table-cell
. Однако я обнаружил, что мне нужно добавить,body {margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0;}
чтобы избежать полосы прокрутки. Вы могли бы удовлетворить это, настроив,body:after height
но я указываю мой в rem, а не px, так что это становится проблематичным.flexbox
Очень простой подход, который отлично работает в кросс-браузерном режиме:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
источник
Я использовал это, чтобы прикрепить нижний колонтитул к нижней части, и это сработало для меня:
HTML
Это единственное изменение, которое вы должны сделать в HTML, добавьте это
div
вместе с"allButFooter"
классом. Я сделал это со всеми страницами, которые были такими короткими, что я знал, что нижний колонтитул не будет прилипать к нижней части страницы, а также достаточно долго, чтобы я знал, что мне нужно прокрутить. Я сделал это, так что я мог видеть, что это работает нормально в случае, если содержимое страницы является динамическим.CSS
У
"allButFooter"
класса естьmin-height
значение, которое зависит от высоты области просмотра (100vh
означает 100% высоты области просмотра) и высоты нижнего колонтитула, о которой я уже знал40px
.Это все, что я сделал, и это отлично сработало для меня. Я не пробовал это в каждом браузере, только в Firefox, Chrome и Edge, и результаты были такими, как я хотел. Нижний колонтитул прилипает к нижней части, и вам не нужно связываться с z-index, position или какими-либо другими свойствами. Положение каждого элемента в моем документе было положением по умолчанию, я не менял его на абсолютный, фиксированный или на что-либо еще.
Работа с адаптивным дизайном
Вот кое-что, что я хотел бы прояснить. Это решение с тем же нижним колонтитулом высотой 40px не сработало, как я ожидал, когда работал над адаптивным дизайном с использованием
Twitter-Bootstrap
. Мне пришлось изменить значение, которое я вычитал в функции:Вероятно, это связано
Twitter-Bootstrap
с тем, что он имеет собственные поля и отступы, поэтому мне пришлось настроить это значение.Надеюсь, это вам пригодится, ребята! По крайней мере, это простое решение, и оно не требует больших изменений во всем документе.
источник
display: none
Спасибо. Это тоже красиво и просто.position: fixed; bottom: 0
и этот. Это лучшее решение, потому что нижний колонтитул не прилипает к нижней части, а остается в конце прокручиваемой страницы..footer {max-height: calc(100vh+40px); position: absolute}
. Как это работает, вы должны просто знать свой размер тела.Начиная с IE7 вы можете просто использовать
Смотрите caniuse для поддержки.
источник
Простое решение, которое я использую, работает с IE8 +
Задайте min-height: 100% для html, чтобы при меньшем содержании неподвижная страница занимала полную высоту порта просмотра и нижний колонтитул оставался внизу страницы. Когда содержание увеличивается, нижний колонтитул сдвигается вниз с содержанием и продолжает придерживаться дна.
Демоверсия JS fiddle: http://jsfiddle.net/3L3h64qo/2/
Css
Html
источник
Еще одно, действительно простое решение - это:
jsFiddle
Хитрость заключается в том, чтобы использовать
display:table
для всего документа иdisplay:table-row
сheight:0
для колонтитула.Так как нижний колонтитул является единственным дочерним
table-row
элементом тела, который имеет отображение как , он отображается в нижней части страницы.источник
height: 100%
фактически равняться 100%, когда коэффициент просмотра составляет 1/1 (квадрат). Когда область просмотра становится шире (альбомная), высота будет больше 100%, а если уже (портретная) меньше 100%. Таким образом, высота пропорциональна ширине окна. Пытался решить это с другой оберткой, но это не сработало. Кто-нибудь получил решение или хотя бы намек ???Очень простое гибкое решение, которое не предполагает фиксированной высоты или изменения положения элементов.
HTML
CSS
Поддержка браузера
Все основные браузеры, кроме IE11 и ниже.
Убедитесь, что вы используете Autoprefixer для соответствующих префиксов.
Показать фрагмент кода
источник
Остерегайтесь мобильных устройств, поскольку они реализуют идею области просмотра «необычным» способом:
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25
Таким образом, использование
position: fixed;
(как я рекомендовал в других местах) обычно не является подходящим способом. Конечно, это зависит от того, какое поведение вы преследуете.То, что я использовал и хорошо работал на настольных и мобильных устройствах, это:
с
источник
Сделай это
Вы также можете прочитать о flex он поддерживается всеми современными браузерами
Обновление : я прочитал о flex и попробовал. Это сработало для меня. Надеюсь, это сделает то же самое для вас. Вот как я реализовал. Здесь главное не идентификатор, это div
Здесь вы можете прочитать больше о flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Имейте в виду, что это не поддерживается более старыми версиями IE.
источник
flex-grow: 1
чего-либо выше нижнего колонтитула будет держать нижний колонтитул должным образом.Я только что ответил как подобный вопрос здесь:
Расположите нижний колонтитул внизу страницы с фиксированным заголовком
Я довольно новичок в веб-разработке, и я знаю, что на этот вопрос уже был дан ответ, но это самый простой способ, который я нашел, чтобы решить его, и я думаю, что это как-то иначе. Я хотел что-то гибкое, потому что нижний колонтитул моего веб-приложения имеет динамическую высоту, в итоге я использовал FlexBox и распорку.
Я предполагаю
column
поведение для нашего приложения, в случае, если вам нужно добавить заголовок, героя или любой контент, выровненный по вертикали.Вы можете поиграть с этим здесь https://codepen.io/anon/pen/xmGZQL
источник
Это известно как липкий нижний колонтитул. Поиск Google для этого придумывает много результатов. CSS Sticky Footer - это тот, который я успешно использовал. Но есть и другие.
Исходный код этого кода
источник
Мой метод jquery, этот помещает нижний колонтитул внизу страницы, если содержимое страницы меньше высоты окна, или просто помещает нижний колонтитул после содержимого в противном случае:
Кроме того, хранение кода в собственном корпусе до того, как другой код сократит время, необходимое для изменения положения нижнего колонтитула.
источник
Я сам изучал эту проблему. Я видел довольно много решений, и у каждого из них были проблемы, часто связанные с некоторыми магическими числами.
Поэтому, используя лучшие практики из разных источников, я придумал это решение:
http://jsfiddle.net/vfSM3/248/
Здесь я хотел добиться того, чтобы основной контент прокручивался между нижним колонтитулом и верхним колонтитулом в зеленой зоне.
вот простой CSS:
источник
Вот как я решил ту же проблему
источник
Это отлично работает
источник
Просто настройте нижний колонтитул
источник
вот мои два цента. По сравнению с другими решениями не нужно добавлять дополнительные контейнеры. Поэтому это решение немного элегантнее. Ниже примера кода я объясню, почему это работает.
Итак, первое, что мы делаем, это делаем самый большой контейнер (html) на 100%. HTML-страница такая же большая, как сама страница. Затем мы устанавливаем высоту тела, она может быть больше 100% тэга html, но она должна быть как минимум такой же большой, поэтому мы используем минимальную высоту 100%.
Мы также делаем тело относительным. Относительный означает, что вы можете перемещать элемент блока относительно относительно его исходного положения. Мы не используем это здесь, хотя. Потому что у родственника есть второе применение. Любой абсолютный элемент является либо абсолютным для корня (html), либо для первого относительного родителя / деда. Это то, что мы хотим, мы хотим, чтобы нижний колонтитул был абсолютным по отношению к телу, а именно к низу.
Последний шаг - установить нижний колонтитул на абсолютное и нижнее: 0, что перемещает его в нижнюю часть первого относительного родителя / деда (основной курс).
Теперь у нас все еще есть одна проблема, которую нужно исправить, когда мы заполняем всю страницу, содержимое выходит за нижний колонтитул. Почему? хорошо, потому что нижний колонтитул больше не находится внутри «потока HTML», потому что он является абсолютным. Так как же это исправить? Мы добавим padding-bottom к телу. Это гарантирует, что тело на самом деле больше, чем его содержание.
Надеюсь, я многое прояснил для вас, ребята.
источник
Динамический лайнер с использованием jQuery
Все методы CSS, с которыми я сталкивался, слишком жесткие. Кроме того, установка нижнего колонтитула
fixed
не является опцией, если это не является частью дизайна.Проверено на:
Предполагая этот макет:
Используйте следующую функцию jQuery:
Что это делает , установлена
min-height
для#content
к высоте окна - высота колонтитула , что когда - либо , что могло бы быть в то время.Поскольку мы использовали
min-height
, если#content
высота превышает высоту окна , функция изящно ухудшается и не оказывает никакого влияния, поскольку она не нужна.Посмотрите это в действии:
Тот же фрагмент на JsFiddle
Бонус:
Мы можем пойти дальше и адаптировать эту функцию к динамическому изменению высоты зрителя следующим образом:
источник
Ты можешь сделать это
источник
Просто установите html, body и другие строки, кроме нижнего колонтитула, на 100%. например
CSS становится
источник
источник
Что об этом:
источник
Я использовал во многих своих проектах и не получил ни одной проблемы :)
для справки, код находится во фрагменте
источник