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

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

291 голосов
/ 13 марта 2009

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

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

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

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

Ответы [ 22 ]

311 голосов
/ 27 марта 2009

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

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

#footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}
76 голосов
/ 03 декабря 2013

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

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

Этот метод ниже использует «хитрость», помещая псевдоэлемент ::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;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

Методы ниже позволяют динамическую высоту нижнего колонтитула:

Использование flexbox 

html, body{ height:100%; margin:0; }
header{ height:50px; background:lightcyan; }
footer{ height:50px; background:PapayaWhip; }

/* Trick */
body{ 
  display:flex; 
  flex-direction:column; 
}

footer{
  margin-top:auto; 
}
 
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

Использование макета таблицы 

html,body { height: 100%;  margin: 0; }

header {
  height: 50px;
  background: lightcyan;
}

footer {
  height: 50px;
  background: PapayaWhip;
}


/**** Trick: ****/
body {
  display: table;
  width: 100%; 
}

footer {
   display: table-row;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
39 голосов
/ 01 ноября 2013

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

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

HTML 

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

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;
}
32 голосов
/ 23 июля 2013

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

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

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

19 голосов
/ 22 марта 2016

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

HTML 

<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

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

CSS 

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

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

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

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

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

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

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

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

16 голосов
/ 19 сентября 2014

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

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

JS Fiddle Working Демо: 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>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>
8 голосов
/ 09 августа 2014

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

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 с height:0 для нижнего колонтитула.

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

7 голосов
/ 20 апреля 2013

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

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

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

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

<body>
    <div id="footer"></div>
</body>

с 

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

#footer {
    position: absolute;
    bottom: 0;
}
5 голосов
/ 01 сентября 2017

Сделай это 

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

Вы также можете прочитать о 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.

4 голосов
/ 18 октября 2013

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

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

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
Страница:
...