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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

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

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

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

Ответ 5

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

HTML

<body>
    <div class="allButFooter">
        <!-- Your page 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-индексом, положением или любыми другими свойствами. Позиция каждого элемента в моем документе была по умолчанию, я не изменил его на абсолютный или фиксированный или ничего.

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

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

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

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

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

Ответ 6

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

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

JS fiddle working Demo: 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>

Ответ 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;
}

Ответ 8

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

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

Ответ 9

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

CSS:

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

HTML:

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

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

Ответ 10

Сделай это

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

Ответ 11

Я только что ответил как похожий вопрос здесь:

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

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

  1. Начните с установки высоты для вашего html и тела
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

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

  1. Создайте класс распорок
.spacer {
    flex: 1; 
}
  1. Так что позже ваш HTML может быть чем-то вроде
<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

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

Ответ 12

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

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

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

Ответ 13

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

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

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

Ответ 14

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

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 users 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 footers 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>

Ответ 15

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

<!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, но она должна быть по крайней мере такой же большой, поэтому мы используем min-height 100%.

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

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

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

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

Ответ 16

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

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>

Ответ 17

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

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

Ответ 18

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

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

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

  • Chrome: 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>

Ответ 19

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

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

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

Ответ 20

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

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

css становится

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

Ответ 21

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

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

Ответ 22

.footer{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

Ответ 23

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

enter image description here

    <div id="body">
        <div style="float:left; height: 100px;">Nav<br />linka<br />linkb</div>
        <div id="content">content</div>
    </div>
    <table width="100%"><tr><td></td></tr></table>
    <div id="footer">Footer</div>

Ответ 24

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

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

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