CSS, чтобы нижний колонтитул HTML-страницы оставался внизу страницы с минимальной высотой, но не перекрывал страницу

У меня была следующая страница (deadlink: http://www.workingstorage.com/Sample.htm ), у которой есть нижний колонтитул, который я не могу сесть в нижней части страницы.

Я хочу, чтобы нижний колонтитул

  • придерживайтесь нижней части windows, когда страница короткая, и экран не заполняется, и
  • оставаться на конце документа и перемещаться вниз, как обычно, когда имеется более чем экранный контент (вместо перекрытия содержимого).

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

Простым методом является создание тела 100% вашей страницы с min-height 100% . Это отлично работает, если высота вашего нижнего колонтитула не изменяется.

Дайте нижнему колонтитулу отрицательную маржу:

 #footer { clear: both; position: relative; z-index: 10; height: 3em; margin-top: -3em; } 

Очень простой подход, который отлично подходит для кросс-браузера:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

HTML

 

CSS

 html, body { margin:0; padding:0; height:100%; } #container { min-height:100%; position:relative; } #header { background:#ff0; padding:10px; } #body { padding:10px; padding-bottom:60px; /* Height of the footer */ } #footer { position:absolute; bottom:0; width:100%; height:60px; /* Height of the footer */ background:#6cf; } 

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

СМОТРЕТЬ ДЕМО

Этот метод ниже использует «трюк», помещая ::after псевдоэлемента в body и устанавливая его на точную высоту нижнего колонтитула, поэтому он будет занимать то же самое пространство, которое выполняет нижний колонтитул, поэтому, когда нижний колонтитул absolute позиция над ним, она выглядела бы так же, как нижний колонтитул действительно занимает пространство и устраняет негативные последствия его абсолютного позиционирования (например, переходя через содержимое тела)

HTML (базовая общая разметка)

 html{ height:100%; } body{ min-height:100%; padding:0; margin:0; position:relative; } header{ height:50px; background:lightcyan; } footer{ background:PapayaWhip; } /* Trick: */ body { position: relative; } body::after { content: ''; display: block; height: 50px; /* Set same as footer's height */ } footer { position: absolute; bottom: 0; width: 100%; height: 50px; } 
  
Header
Content
Footer

Начиная с IE7, вы можете просто использовать

 #footer { position:fixed; bottom:0; } 

См. Caniuse для поддержки.

Простое решение, которое я использую, работает от IE8 +

Дайте минимальную высоту: 100% на html, так что если содержимое меньше, тем не менее, страница занимает полные высоты и нижние колонтитулы в нижней части страницы. Когда контент увеличивается, нижний колонтитул сдвигается вниз с содержимым и продолжает придерживаться снизу.

JS скрипка работает Демо: http://jsfiddle.net/3L3h64qo/2/

Css

 html{ position:relative; min-height: 100%; } /*Normalize html and body elements,this style is just good to have*/ html,body{ margin:0; padding:0; } .pageContentWrapper{ margin-bottom:100px;/* Height of footer*/ } .footer{ position: absolute; bottom: 0; left: 0; right: 0; height:100px; background:#ccc; } 

Html

    

Я использовал это, чтобы придерживать нижний колонтитул снизу, и это сработало для меня:

HTML

  

Это единственная модификация, которую вы должны сделать в HTML, добавьте этот div с "allButFooter" . Я сделал это со всеми страницами, которые были настолько короткими, я знал, что нижний колонтитул не будет прилипать к дну, а также страницы достаточно долго, чтобы я уже знал, что мне нужно прокрутить. Я сделал это, так что я мог видеть, что он работает нормально в случае динамического содержимого страницы.

CSS

 .allButFooter { min-height: calc(100vh - 40px); } 

Класс "allButFooter" имеет значение min-height которое зависит от высоты видового экрана ( 100vh означает 100% высоты видового экрана) и высоты 100vh колонтитула, которую я уже знал, был 40px .

Это все, что я сделал, и это отлично сработало для меня. Я не пробовал это в каждом браузере, просто Firefox, Chrome и Edge, и результаты были такими, какие я хотел. Нижний колонтитул придерживается нижней части, и вам не нужно возиться с z-индексом, положением или любыми другими свойствами. Позиция каждого элемента в моем документе была по умолчанию, я не изменил его на абсолютный или фиксированный или что-то еще.

Работа с адаптивным дизайном

Вот что я хотел бы прояснить. Это решение с тем же нижним колонтитулом, которое было на 40 пикселей выше, не срабатывало, как я ожидал, когда я работал в отзывчивом дизайне, используя Twitter-Bootstrap . Мне пришлось изменить значение, которое я искал в функции:

 .allButFooter { min-height: calc(100vh - 95px); } 

Вероятно, это связано с тем, что Twitter-Bootstrap поставляется с собственными полями и paddings, поэтому я должен был настроить это значение.

Надеюсь, это будет полезно для вас, ребята! По крайней мере, это простое решение, и оно не предполагает внесения больших изменений во весь документ.

Единственное, о чем следует опасаться, это мобильные устройства, поскольку они реализуют идею видового экрана «необычным» способом:

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

Таким образом, использование position: fixed; (как я видел, рекомендуется в других местах), как правило, это не путь. Конечно, это зависит от вашего поведения.

То, что я использовал и хорошо работало на настольных и мобильных устройствах, является:

    

с

 body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 0; margin: 0; } #footer { position: absolute; bottom: 0; } 

Тем не менее, еще одно очень простое решение:

 html, body { height: 100%; width: 100%; margin: 0; display: table; } footer { background-color: grey; display: table-row; height: 0; } 

jsFiddle

Хитрость заключается в том, чтобы использовать display:table для всего документа и display:table-row with height:0 для нижнего колонтитула.

Поскольку нижний колонтитул является единственным дочерним элементом тела, который имеет отображение в виде table-row , он отображается в нижней части страницы.

Мой метод jquery, который устанавливает нижний колонтитул в нижней части страницы, если содержание страницы меньше высоты windows, или просто помещает нижний колонтитул после содержимого в противном случае:

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

 (function() { $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed"); })(); 

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

Поэтому, используя лучшие практики из разных источников, я придумал это решение:

http://jsfiddle.net/vfSM3/248/

То, что я хотел достичь именно здесь, – это получить основное содержание для прокрутки между нижним колонтитулом и заголовком внутри зеленой зоны.

вот простой css:

 html, body { height: 100%; margin: 0; padding: 0; } header { height: 4em; background-color: red; position: relative; z-index: 1; } .content { background: white; position: absolute; top: 5em; bottom: 5em; overflow: auto; } .contentinner { } .container { height: 100%; margin: -4em 0 -2em 0; background: green; position: relative; overflow: auto; } footer { height: 2em; position: relative; z-index: 1; background-color: yellow; } 

Это известно как липкий нижний колонтитул. Поиск Google для него приносит много результатов. CSS Sticky Footer – тот, который я использовал успешно. Но их больше.

вот мои два цента. В сравнении с другими решениями не нужно добавлять дополнительные контейнеры. Поэтому это решение немного более элегантно. Под примером кода я объясню, почему это работает.

     test    
header
footer

Итак, первое, что мы делаем, это сделать самый большой контейнер (html) на 100%. Страница html такая же, как и сама страница. Затем мы устанавливаем высоту тела, она может быть больше, чем 100% тега html, но она должна быть по крайней мере такой же большой, поэтому мы используем min-height 100%.

Мы также делаем тело относительным. Относительное означает, что вы можете перемещать элемент блока относительно относительно его исходного положения. Однако мы не используем это здесь. Потому что относительное имеет второе применение. Любой абсолютный элемент либо является абсолютным для корня (html), либо для первого относительного родителя / дедушки. Это то, чего мы хотим, мы хотим, чтобы нижний колонтитул был абсолютным относительно тела, а именно дном.

Последний шаг – установить нижний колонтитул в абсолютный и нижний: 0, который перемещает его в нижнюю часть первого родителя / прародителя, который является относительным (body ofcourse).

Теперь у нас по-прежнему есть одна проблема для исправления, когда мы заполняем полную страницу, содержимое идет ниже нижнего колонтитула. Зачем? ну, потому что нижний колонтитул больше не находится в «streamе html», потому что он абсолютен. Итак, как мы это исправим? Мы добавим к телу нижнюю часть. Это гарантирует, что тело на самом деле больше, чем содержимое.

Надеюсь, я много сделал для вас, ребята.

Сделай это

 

Вы также можете прочитать о flex, который поддерживается всеми современными браузерами

Обновление : я прочитал о flex и попробовал. Это сработало для меня. Надеюсь, он сделает то же самое для вас. Вот как я реализовал. Главное не идентификатор, это div

 body { margin: 0; display: flex; min-height: 100vh; flex-direction: column; } main { display: block; flex: 1 0 auto; } 

Здесь вы можете узнать больше о flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Имейте в виду, что он не поддерживается более старыми версиями IE.

Вот как я решил ту же проблему

 html { height: 100%; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { position: relative; margin: 0; padding-bottom: 6rem; min-height: 100%; font-family: "Helvetica Neue", Arial, sans-serif; } .demo { margin: 0 auto; padding-top: 64px; max-width: 640px; width: 94%; } .footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; } 
 

CSS “Always on the bottom” Footer

I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.

However, if the content is taller than the user's viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).

If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer's parent element to be the same value (or larger if you want some spacing).

This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with position: absolute; .

Просто установите html, body и другие строки, кроме нижнего колонтитула, на 100%. например

  

css становится

 html, body, header, content{ height:100%; } 

Вы можете сделать это

 .footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; text-align: center; } 

Очень простое гибкое решение, которое не предполагает фиксированных высот или изменения положения элементов.

HTML

 

CSS

 .container { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; } 

Поддержка браузера

Все основные браузеры, кроме IE11 и ниже.

Обязательно используйте Autoprefixer для соответствующих префиксов.

 .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100vh; } main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } ///////////////////////////////////////////// header, main, footer { margin: 0; display: block; } header, footer { min-height: 80px; } header { background-color: #ccc; } main { background-color: #f4f4f4; } footer { background-color: orange; } 
 

Динамический один вкладыш с использованием jQuery

Все методы CSS, с которыми я столкнулся, слишком жесткие. Кроме того, установка нижнего колонтитула в fixed не является вариантом, если это не часть дизайна.


Протестировано:

  • Chrome: 60
  • FF: 54
  • IE: 11

Предположим, что этот макет:

   

Используйте следующую функцию jQuery:

 $('#content').css("min-height", $(window).height() - $("#footer").height() + "px"); 

Что это делает, устанавливается min-height для #content к высоте windowsmin-height #content колонтитула, что когда-либо было в тот момент.

Поскольку мы использовали min-height , если высота #content превышает высоту windows , функция изящно #content и ничего не действует, поскольку она не нужна.

Смотрите в действии:

 $("#fix").click(function() { $('#content').css("min-height", $(window).height() - $("#footer").height() + "px"); }); 
 * { margin: 0; padding: 0; box-sizing: border-box; } html { background: #111; } body { text-align: center; background: #444 } #content { background: #999; } #footer { background: #777; width: 100%; } 
    

Very short content

Я использовал в своих многочисленных проектах и ​​никогда не получал ни одной проблемы 🙂

для вашей справки, код находится в fragmentе

 * { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */ height: 100%; margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */ background:green; } .footer, .push { height: 50px; /* .push must be the same height as .footer */ } .footer{ background:gold; } 
    Untitled Document   
Content Area
Interesting Posts

Как автовоспроизвести HTML5 mp4-видео на Android?

Разбор массива JSON в объекте JSON

Как изменить кодировку файлов в NetBeans?

Отключить пользователя в ASPNET-идентификаторе 2.0

Настройка и получение переменной с помощью Microsoft Word (без VBA)

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

Контейнеры LXD и сеть со статическим IP-адресом

Изменение цвета дисплея с Ч / Б до цвета (наоборот) с помощью программы.

Выключайте экран программно, когда лицо закрывает экран на Android

R строк строки сценария при ошибке?

BSTR в std :: string (std :: wstring) и наоборот

«Продолжить нумерацию» не может продолжить всю нумерацию ниже той, которую я щелкнул правой кнопкой мыши

NULL разрешено в основном ключе – почему и в какой СУБД?

Как сделать блокнот для сохранения текста в UTF-8 без спецификации?

Можете ли вы получить имена столбцов из SqlDataReader?

Давайте будем гением компьютера.