Вопросы Теги

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

76
задан Joey Morani 19 August 2010 в 19:39
поделиться

3 ответа

ОБНОВЛЕНИЕ

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

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

Решение 1 - margin offset

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 и другие.

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

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

88
ответ дан 24 November 2019 в 11:13
поделиться

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

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

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

42
ответ дан 24 November 2019 в 11:13
поделиться

Проверьте это, работает в 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
ответ дан 24 November 2019 в 11:13
поделиться