Как я могу расширить нижний колонтитул до нижней части страницы?

У меня есть макет, подобный этому

<section id="container">
    <header></header>
    <section id="main"></section>
    <footer></footer>
</section>

В настоящий момент моя страница выложена следующим образом:

-------------------
|                 | 100px height
|  HEADER         |
|-----------------|
|                 |
|  MAIN           | 500px height
|                 |
|-----------------|
|                 |
|  FOOTER         |
|-----------------|
|                 |
|                 |
-------------------

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

-------------------
|                 | 100px height
|  HEADER         | 
|-----------------|
|                 |
|  MAIN           | 500px height
|                 |
|-----------------|
|                 |
|  FOOTER         |
|                 |
|                 |
|  FOOTER         |
-------------------

ПРИМЕЧАНИЕ: Я заметил, что все ответы до сих пор будут привязывать нижний колонтитул к нижней части страницы, однако при перетаскивании нижнего колонтитула просто перемещается вниз/основной контейнер расширяется, я хочу, чтобы нижний колонтитул расширялся.

Ответы

Ответ 1

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

footer {
    box-shadow: 0px 500px 0px 500px #000;
}

Это создает тень, которая упадет с экрана, если не понадобится, но в противном случае даст покрытие 1000px в пространстве ниже нижнего колонтитула, поэтому фон тела не появится ниже него.

Ответ 2

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

Говорить цвет фона нижнего колонтитула - # 000000;

Установите цвет фона тела на # 000000

и убедитесь, что

охватывает ширину 100%.

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

Ответ 3

Несмотря на то, что на нем отмечен ответ, он, похоже, не полностью отвечает на вопрос OP. У меня был такой же вызов, и вот что я нашел для работы:

  • Установите HTML и Body на 100% высоту.
  • Убедитесь, что весь ваш контент, включая нижний колонтитул, обернут большим div (site-container)
  • Скрипт с пространством в нижнем колонтитуле.

Вот CSS:

html, body{
    height: 100%
}

.site-container{
    overflow: hidden;
    min-height: 100%;
    min-width: 960px;
}

.footer{
    padding-bottom: 32000px;
    margin-bottom: -32000px;
 }

Я нашел это здесь: https://www.joestrong.co.uk/blog/2012/01/12/css-tip-extend-your-sites-footer-to-the-bottom-of-the-page/, который содержит больше информации.

Ответ 5

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

Демо, отредактируйте здесь.

Ответ 7

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

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

Моя страница (очень просто) была следующей:

<!DOCTYPE HTML>
<html>
<head>usual stuff</head>
<body>
<div id="container">
<header>fixed height and containing various stuff</header>
<div id="sidebar">floated left and containing nav</div>
<div id="content">floated left and containing various stuff</div>
<div class="clearfloat"></div>
<!-- end container --></div>
<footer>various stuff, address etc.</footer>
</body>
</html>

Затем в css включить эти правила (вместе со всеми другими стилями):

html, body {
    height: 100%;
    overflow: hidden;
}

    footer {
    height: 100%;
}

Скрытое переполнение удалило раздражающую полосу прокрутки, вызванную 100% html и высотой тела, компенсирующей высоту контейнера и выходящую за окно браузера.

Ответ 8

Подобно @c4collins, вы можете использовать высоту представления вместо фиксированного пикселя, если у кого-то огромный монитор

footer{
  box-shadow: 0 100vh 0 100vh #000000;
}