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

этот вопрос уже есть ответ здесь:

может ли кто-нибудь объяснить, как выровнять нижний колонтитул div в нижней части страницы. Из примеров, которые я видел, все они показывают, как сделать div видимым внизу, независимо от того, где вы прокрутил страницу. Хотя я этого не хочу. Я хочу, чтобы он был закреплен в нижней части страницы, чтобы он не двигался. Спасибо за помощь!

7 70
html css alignment footer

7 ответов:

обновление

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

Я включаю обновленные решения inline, а также рабочие примеры на JSFiddle. Примечание: Я полагаюсь на сброс CSS, хотя я не включаю эти стили в строку. См.нормализуется.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's total height */
}

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

#content {
  height: 100%;
}

#footer {
  height: 50px; /* the footer's 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;
}

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

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

это то, что вы в смысле?

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

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

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

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

84

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

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

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

37

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

Это можно сделать следующим образом.

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

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

19

проверьте это, работает на 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>
7

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

6

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

дайте min-height: 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>
3

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

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

вероятно, любительский способ сделать это, но эффективный!!!

1