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

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

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

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

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

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

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

Ответы [ 22 ]

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

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

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>

Источник для этого кода

3 голосов
/ 26 сентября 2013

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

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

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 голосов
/ 14 декабря 2018

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

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

Я довольно новичок в веб-разработке, и я знаю, что на этот вопрос уже дан ответ, но это самый простой способ, который я нашел, чтобы решить его, и я думаю, что это как-то иначе Я хотел что-то гибкое, потому что нижний колонтитул моего веб-приложения имеет динамическую высоту, в итоге я использовал 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

2 голосов
/ 18 августа 2017

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

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 и ниже.

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

.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>
2 голосов
/ 30 декабря 2014

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

<!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 к телу. Это гарантирует, что тело на самом деле больше, чем его содержание.

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

2 голосов
/ 01 августа 2016

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

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>
1 голос
/ 20 октября 2018 
footer {
  margin-top:calc(5% + 60px);
}

Это прекрасно работает

1 голос
/ 12 октября 2018

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

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

 <div class="footer">
   Footer is always bootom
 </div>
1 голос
/ 06 сентября 2017

Динамический лайнер с использованием 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 голос
/ 15 июля 2014

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

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

CSS становится 

html, body, header, content{
height:100%;
}
Страница:
...