379

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

Я хочу, щоб колонтитул

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

CSS успадковується і мене бентежить; Я не можу змінити це належним чином, щоб розмістити мінімальну висоту вмісту або змусити нижній колонтитул знизу.

css footer

— Caveatrob
джерело

16

Дивно, що це така поширена проблема. Можливо, в CSS4 ми побачимо реалізацію "make nav bar" та "make footer", оскільки такі часті спроби.

— ізоморфізми

1

Ніколи не буде CSS4 (CSS3 буде просто рости). Я думаю, що це буде виправлено з реалізацією flexbox.

— Marijke Luttekes

1

Відмінна стаття про це: css-tricks.com/couple-takes-sticky-footer

— Phil

expertuggestion.com/css-snippets/8

— Лаліт Багель

345

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

Наведіть нижній частині нижнього колонтитула:

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

— Джон Вінстанлі
джерело

27

Це працює лише в тому випадку, якщо ви достроково знаєте висоту колонтитула. Іноді колонтитули мають динамічний зміст або будують рамки. Будь-які ідеї для колонтитулів змінної висоти?

— Коста

@Costa ознайомтеся з моєю відповіддю тут на рішення, яке працює з колонтитулами змінної висоти.

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

для динамічного контенту просто опустіть "висоту", і колонтитул адаптується до вмісту. Не тестується у всіх браузерах

— m47730

Це може знадобитися box-sizing: border-box;організму [і #container].

— konsolebox

Це здається безліччю дивних хитрощів, нижче є відповіді, які прості і не використовують хитрощів.

— Андрій Костер

165

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

ОГЛЯД ДЕМО

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

Просто і елегантно, і що важливіше, це працює. Інші рішення виходять з ладу, коли ви починаєте додавати символи display: table display: table-row display:table-cell. Однак я знайшов, що мені потрібно додати, body {margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0;}щоб уникнути смуги прокрутки. Ви можете задовольнити це, скоригувавши, body:after heightале я вказую, що моє в згадуванні не px, тому це стає проблематичним.

— Стів Варінг

3

@SteveWaring - Дякую Оновили цю відповідь, оскільки вона була досить старою. Тепер я за те, щоб використовуватиflexbox

— vsync

1

У CSS під "базовою загальною розміткою" була невелика помилка, яка призвела до того, що він не працює (помилка відсутня у пов'язаному "DEMO", що нормально). Я взяв на себе сміливість це виправити.

— sleske

3

ДЯКУЮ ТОБІ! Рішення flexbox насправді просте і не використовує жодних хак чи фіксованих розмірів чи фіксованих позицій.

— Андрій Костер

1

Цей демон є єдиним, хто працює! Фантастичний, дякую!

— Дракініте

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-індексом, позицією чи будь-якими іншими властивостями. Позиція кожного елемента в моєму документі була позицією за замовчуванням, я не змінював її на абсолютну, фіксовану чи нічого.

Робота з чуйним дизайном

Ось, що я хотів би прояснити. Це рішення, з тим самим Footer, який був високою 40 пікселів, не працював, як я очікував, коли я працював у чуйному дизайні, використовуючи Twitter-Bootstrap. Мені довелося змінити значення, яке я віднімав у функції:

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

Це, мабуть, тому, що він Twitter-Bootstrapмає власні поля та прокладки, тому мені довелося коригувати це значення.

Сподіваюсь, це корисно для вас, хлопці! Принаймні, спробувати це просте рішення, яке не передбачає великих змін у всьому документі.

— Н. Ларрі
джерело

У мене виникли проблеми з усілякими рішеннями цієї проблеми. Це рішення працює з моєю сторінкою, яка змінює те, що відображається в тілі за допомогою display: noneДякую. Це теж приємно і просто.

— Стів Варінг

після багатьох годин спроб рішень лише два працювали nl. position: fixed; bottom: 0і ця. Таке рішення є найкращим, оскільки нижній колонтитул не тримається внизу, а залишається в кінці сторінки, що прокручується.

— Hmerman6006

щоб спиратися на свою відповідь, ви можете подивитися на це іншим способом, встановивши .footer {max-height: calc(100vh+40px); position: absolute}. Оскільки це також працює, ви просто повинні знати свій розмір тіла.

— Hmerman6006

29

З IE7 можна просто використовувати

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

Див. Службу підтримки для підтримки.

— Ліам
джерело

77

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

— Caveatrob

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

— sleske

Це рішення - єдине друкування нижнього колонтитулу на кожну сторінку, і це так просто! Але я не можу змусити його працювати, що вміст не перетинається з основним контентом. Хтось отримав для цього рішення?

— Хатцен

15

Просте рішення, яке я використовую, працює з 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>
    <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

— Carlos Torres

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

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

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/…

— Коста,

1

Це рішення, здається, не працює повністю - Firefox ігнорує висоту колонтитула 0. Я використовував висоту 1px або навіть 1% замість цього. Edge, IE11, Chrome і мобільне сафарі задоволені 0.

— Kitet

Я дуже люблю це рішення. Але коли я будую такий макет, як це, в браузері обчислюються дочірні елементи. Скажімо, ми хочемо мати контейнер у верхній частині сторінки, і він повинен бути height: 100%фактично його 100%, коли коефіцієнт перегляду становить 1/1 (квадрат). Коли вікно перегляду буде ширшим (пейзаж), висота буде більше 100%, а якщо вужча (портретна) менше 100%. Таким чином, висота опорна до ширини вікна. Намагався вирішити це за допомогою іншої обгортки, але це не вийшло. Хтось отримав рішення або принаймні натяк ???

— Аксель

@Axel У цій версії я додав блакитну оболонку зверху зі 100% висотою, яка займає всю висоту (мінус висоту колонтитулу), незалежно від ширини огляду. Я думаю, у вас можуть виникнути інші пошкодження CSS. Спробуйте створити мінімізовану версію свого випуску на основі мого оригінального jsFiddle

— Jose Rui Santos

@JoseRuiSantos Дякую вам за вашу відповідь. Здається, це помилка FireFox. Дивіться скріншот

— Axel

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

— Бен Джексон
джерело

7

Дуже просте гнучке рішення, яке не передбачає фіксованої висоти або зміни положення елементів.

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>

Розгорніть фрагмент

— м.спіратос
джерело

працював як шарм! навіть для решти більше ніж 4-кілометрові палиці внизу

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

6

Зробити це

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

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

Оновлення : я прочитав про flex та спробував це. Це працювало для мене. Сподіваємось, це зробить те саме. Ось як я реалізував. Тут головним є не ідентифікатор, це діл

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

— Камо
джерело

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

— хусайт
джерело

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>

Розгорніть фрагмент

— Немус
джерело

3

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

Це чудово працює

— Картікайян
джерело

2

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

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

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

— rahedcs
джерело

Не працює. Це завжди дотримується дна, навіть якщо у нас дуже велика сторінка. Він не може прокручуватися всією сторінкою, а лише дотримуватися дна.

— fWd82

Не працює. Нижній колонтитул надходить у верхній частині вмісту.

— indolentdeveloper

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", тому що він абсолютний. То як ми це можемо виправити? До корпусу ми додамо оббивні дно. Це гарантує, що тіло насправді більше, ніж його вміст.

Я сподіваюся, що я зробив багато зрозумілого для вас, хлопці.

— Девід
джерело

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>

— новецентонове
джерело

Хоча цей код може відповісти на питання, надаючи додатковий контекст щодо того, чому та / або як цей код відповідає на питання, покращує його довгострокове значення.

— β.εηοιτ.βε

-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` метод: (не дозволяє динамічну висоту колонтитула)