Как выравнивать нижний колонтитул (div) в нижней части страницы?

Ответ 1

UPDATE

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

Я включаю в себя обновленные решения inline, а также рабочие примеры JSFiddle. Примечание. Я полагаюсь на CSS reset, хотя я не включаю эти стили в строку. См. normalize.css

Решение 1 - смещение поля

https://jsfiddle.net/UnsungHero97/ur20fndv/2/

HTML

<div id="wrapper">
  <div id="content">
    <h1>Hello, World!</h1>
  </div>
</div>
<footer id="footer">
  <div id="footer-content">Sticky Footer</div>
</footer>

CSS

html, body {
  margin: 0px;
  padding: 0px;
  min-height: 100%;
  height: 100%;
}

#wrapper {
  background-color: #e3f2fd;
  min-height: 100%;
  height: auto !important;
  margin-bottom: -50px; /* the bottom margin is the negative value of the footer total height */
}

#wrapper:after {
  content: "";
  display: block;
  height: 50px; /* the footer total height */
}

#content {
  height: 100%;
}

#footer {
  height: 50px; /* the footer total height */
}

#footer-content {
  background-color: #f3e5f5;
  border: 1px solid #ab47bc;
  height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
  padding: 8px;
}

Решение 2 - flexbox

https://jsfiddle.net/UnsungHero97/oqom5e5m/3/

HTML

<div id="content">
  <h1>Hello, World!</h1>
</div>
<footer id="footer">Sticky Footer</footer>

CSS

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#content {
  background-color: #e3f2fd;
  flex: 1;
  padding: 20px;
}

#footer {
  background-color: #f3e5f5;
  padding: 20px;
}

Вот некоторые ссылки с более подробными объяснениями и различными подходами:

• https://css-tricks.com/couple-takes-sticky-footer/
• https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
• http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

ОРИГИНАЛЬНЫЙ ОТВЕТ

Это то, что вы имеете в виду?

http://ryanfait.com/sticky-footer/

Этот метод использует только 15 строк CSS и почти никакой разметки HTML. Еще лучше, это полностью допустимый CSS, и он работает во всех основных браузерах. Internet Explorer 5 и выше, Firefox, Safari, Opera и т.д.

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

Сообщите мне, если вам нужна помощь в реализации. Надеюсь, это поможет.

Ответ 2

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

<style type="text/css">
  #footer {
    position : absolute;
    bottom : 0;
    height : 40px;
    margin-top : 40px;
  }
</style>
<div id="footer">I am footer</div>

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

Ответ 3

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

Вы можете выполнить следующее:

&ltstyle>
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;
}
&lt/style>

&ltdiv id="container">
    &ltdiv id="header">header&lt/div>
    &ltdiv id="body">body&lt/div>
    &ltdiv id="footer">footer&lt/div>
&lt/div>

Источник: Как сохранить нижние колонтитулы внизу страницы

Ответ 4

проверить это, работает на firefox и IE

<style>
    html, body
    {
        height: 100%;
    }
    .content
    {
        min-height: 100%;
    }
    .footer
    {
        position: relative;
        clear: both;
    }
</style>

<body>
<div class="content">Page content
</div>
<div class="footer">this is my footer
</div>
</body>

Ответ 5

Используйте <div style="position:fixed;bottom:0;height:auto;margin-top:40px;width:100%;text-align:center">I am footer</div>. Нижний колонтитул не будет подниматься вверх

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

Я новичок, и эти методы не работают для меня. Тем не менее, я попробовал свойство margin-top в css и просто добавил значение пикселей контента +5.

Пример: мой макет содержимого имел высоту 1000 пикселей, поэтому я поставил значение верхнего предела 1005px в нижнем колонтитуле css, которое дало мне границу 5 пикселей и нижний колонтитул, который восхитительно расположен в нижней части моего сайта.

Возможно, любительский способ сделать это, но ЭФФЕКТИВНО!!!