380

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

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

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

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

css footer

— Caveatrob
источник

16

Удивительно, что это такая распространенная проблема. Возможно, в CSS4 мы увидим реализации «сделать панель навигации» и «сделать нижний колонтитул», так как они очень часто предпринимаются.

— изоморфизм

1

CSS4 никогда не будет (CSS3 просто будет расти). Я думаю, что это будет исправлено с реализацией flexbox.

— Марийке Люттекес

2

Отличная статья на эту тему

— Фил

expertuggestion.com/css-snippets/8

— Лалит

344

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

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

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}

— Джон Винстэнли
источник

28

Это работает, только если вы знаете высоту нижнего колонтитула раньше времени. Иногда нижние колонтитулы имеют динамическое содержимое, или ваша структура создается. Есть идеи по изменению высоты колонтитула?

— Коста

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

— Хосе Руи Сантос

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

— m47730,

Это может потребовать box-sizing: border-box;от тела [и #container].

— konsolebox

Это похоже на множество странных трюков, ниже приведены ответы, которые просты и не используют трюки.

— Эндрю Костер

166

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

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

Метод 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>

Развернуть фрагмент

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

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

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>

Развернуть фрагмент

Метод раскладки таблицы:

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>

Развернуть фрагмент

— VSync
источник

Просто и элегантно, а главное - работает. Другие решения терпят неудачу, когда вы начинаете добавлять div с 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, так что это становится проблематичным.

— Стив Уоринг

3

@ SteveWaring - Спасибо. Обновил этот ответ, так как он был довольно старым. Теперь я за использованиеflexbox

— vsync

1

У CSS в разделе «базовая общая разметка» была небольшая ошибка, из-за которой он не работал (ошибка отсутствовала в связанном «DEMO», что нормально). Я позволил себе исправить это.

— слеське

3

БЛАГОДАРЮ ВАС! Решение flexbox на самом деле простое и не использует хаков, странных фиксированных размеров или фиксированных позиций.

— Эндрю Костер

1

Эта демоверсия - единственная, которая работает! Фантастика, спасибо!

— Drakinite

51

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

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

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;
}

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

Развернуть фрагмент

— Тамас Пап
источник

34

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

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 или какими-либо другими свойствами. Положение каждого элемента в моем документе было положением по умолчанию, я не менял его на абсолютный, фиксированный или на что-либо еще.

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

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

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

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

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

— Н. Ларри
источник

Я столкнулся с проблемами со всевозможными решениями этой проблемы. Это решение работает с моей страницей, которая изменяет то, что отображается в теле, используя display: noneСпасибо. Это тоже красиво и просто.

— Стив Уоринг,

после многих часов пробных решений только два сработали. position: fixed; bottom: 0и этот. Это лучшее решение, потому что нижний колонтитул не прилипает к нижней части, а остается в конце прокручиваемой страницы.

— Hmerman6006

Чтобы развить свой ответ, вы можете посмотреть на него по-другому, установив .footer {max-height: calc(100vh+40px); position: absolute}. Как это работает, вы должны просто знать свой размер тела.

— Hmerman6006

29

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

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

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

— Liam
источник

77

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

— Caveatrob

@Caveatrob: Я позволил себе отредактировать эту важную информацию в вашем вопросе, просто чтобы избежать недоразумений (для будущих читателей вы, вероятно, решили это за это время :-)).

— слесье

Это единственное решение, печатающее нижний колонтитул на каждой странице, и это так просто! Но я не могу заставить это работать, что содержание не пересекается с основным содержанием. У кого-нибудь есть решение для этого?

— Хатцен

15

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

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

Демоверсия JS fiddle: 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>

— Санджив
источник

это хорошо ... но просто обновите .pageContentWrapper {padding-bottom: 100px; / * Высота нижнего колонтитула * /}

— Subodh Sharma,

Большое спасибо. работает над Angular 7

— Карлос Торрес

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

— Константин Ван

14

Еще одно, действительно простое решение - это:

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элементом тела, который имеет отображение как , он отображается в нижней части страницы.

— Хосе Руи Сантос
источник

Мне нравятся таблицы css, но они создают проблемы, которые довольно странные: stackoverflow.com/questions/24898115/…

— Costa

1

Это решение, похоже, не работает полностью - Firefox игнорирует высоту нижнего колонтитула 0. Вместо этого я использовал высоту 1px или даже 1%. Edge, IE11, Chrome и мобильное сафари счастливы с 0.

— Китет

Я действительно люблю это решение. Но когда я строю свой макет, как это, браузер вычисляет дочерние элементы. Допустим, мы хотим, чтобы контейнер находился вверху страницы, и тогда он должен height: 100%фактически равняться 100%, когда коэффициент просмотра составляет 1/1 (квадрат). Когда область просмотра становится шире (альбомная), высота будет больше 100%, а если уже (портретная) меньше 100%. Таким образом, высота пропорциональна ширине окна. Пытался решить это с другой оберткой, но это не сработало. Кто-нибудь получил решение или хотя бы намек ???

— Аксель

@Axel В этой версии я добавил синий div сверху со 100% высотой, который занимает всю высоту (минус высота нижнего колонтитула), независимо от ширины области просмотра. Я думаю, у вас могут быть другие проблемы с CSS. Попробуйте создать минимизированную версию вашей проблемы на основе моего оригинального jsFiddle

— Хосе Руи Сантос

@JoseRuiSantos Большое спасибо за ваш ответ. Кажется, это ошибка Firefox. Смотрите скриншот

— Аксель

8

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

HTML

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

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;
}

/////////////////////////////////////////////

body,
html {
    margin: 0;
    padding: 0;
}

header,
main,
footer {
  margin: 0;
  display: block;
}

header,
footer {
  min-height: 80px; 
}

header {
  background-color: #ccc;
}

main {
  background-color: #f4f4f4;
}

footer {
  background-color: orange;
}

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

Развернуть фрагмент

— m.spyratos
источник

работал как шарм! даже для разрешения более 4 тыс. футов внизу

— Арпан Банерджи

7

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

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;
}

— Бен Джексон
источник

6

Сделай это

<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.

— Аарт Тандель
источник

1

Это лучший ответ на практике. Использование flex-grow: 1чего-либо выше нижнего колонтитула будет держать нижний колонтитул должным образом.

— iBug

5

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

Расположите нижний колонтитул внизу страницы с фиксированным заголовком

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

Начните с установки высоты для вашего HTML и тела

html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

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

Создать спейсерный класс

.spacer {
    flex: 1; 
}

Так что позже ваш HTML может быть что-то вроде

<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

Вы можете поиграть с этим здесь https://codepen.io/anon/pen/xmGZQL

— Camo
источник

5

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

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

Развернуть фрагмент

Исходный код этого кода

— Паоло Бергантино
источник

3

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

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

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

— Сэм Джонс
источник

3

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

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

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;
}

— husayt
источник

3

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

— Тармил

1

@Tarmil взгляните на numerics.info . Видите ли вы сейчас, когда это может быть полезно?

— Хусайт

3

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

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;
}

<div class="demo">

  <h1>CSS “Always on the bottom” Footer</h1>

  <p>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.</p>

  <p>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).</p>

  <p>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).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

Развернуть фрагмент

— Nemus
источник

3

footer {
  margin-top:calc(5% + 60px);
}

Это отлично работает

— Karthikaeyan
источник

2

Просто настройте нижний колонтитул

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}

 <div class="footer">
   Footer is always bootom
 </div>

— rashedcs
источник

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

— fWd82

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

— индолент-разработчик

1

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>

            html
            {
                height:100%;
            }

            body
            {
                min-height:100%;
                padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                margin:0; /*see above comment*/
            }

            body
            {
                position:relative;
                padding-bottom:60px; /* Same height as the footer. */           
            }

            footer
            {
                position:absolute;
                bottom:0px;
                height: 60px;

                background-color: red;
            }

        </style>
    </head>
    <body>
        <header>header</header>


        <footer>footer</footer>
    </body>
</html>

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

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

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

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

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

— Дэвид
источник

1

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

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

Проверено на:

Хром: 60
FF: 54
IE: 11

Предполагая этот макет:

<html>

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

</html>

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

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

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

Поскольку мы использовали min-height, если #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%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
    <button id="fix">Fix it!</button>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>

Развернуть фрагмент

Тот же фрагмент на JsFiddle

Бонус:

Мы можем пойти дальше и адаптировать эту функцию к динамическому изменению высоты зрителя следующим образом:

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

* {
  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%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>

Развернуть фрагмент

— Я хаз коде
источник

1

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

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

— Абдалла Абдилла
источник

0

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

<body>
<header></header>
<content></content>
<footer></footer>

CSS становится

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

— Олатунде Г.
источник

0

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>


#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

— Сан Джайси
источник

0

Что об этом:

<div style="min-height: 100vh;"> 
 content
</div>

<footer>
 copyright blah blah
</footer>

— novecentonove
источник

Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, почему и / или как этот код отвечает на вопрос, повышает его долгосрочную ценность.

— β.εηοιτ.βε

-1

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

для справки, код находится во фрагменте

* {
	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;
  }

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <div class="wrapper">
    Content Area
    </div>
  
  <div class="push">
    </div>
  
  <div class="footer">
    Footer Area
    </div>
</body>
</html>

Развернуть фрагмент

— Сантош Халсе
источник

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

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

Метод Flexbox:

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

Метод раскладки таблицы:

Css

Html

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

Бонус:

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