Нижний колонтитул позиции внизу страницы с фиксированным заголовком

Я хочу разместить нижний колонтитул в нижней части страницы, который также имеет фиксированный заголовок...

Не с position: fixed - я не хочу, чтобы он оставался на экране, он должен быть только в конце страницы и вести себя нормально при прокрутке.
Не в нижней части видимого экрана. В нижней части страницы , т.е. после всего остального содержимого.

Вот диаграмма, которая лучше объясняет:

Здесь код:

Я подготовил демо: JSFiddle
Или см. ниже

<div id="header">Header</div>
<div id="content">
    <p>Some content...</p>    
</div>
<div id="footer">Footer</div>

body{
    /* Just to enable scrolling in JSFiddle */
    height: 1000px;
}

#header{
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0px;
    z-index: 1;
}

#content{
    width: 100%;
    position: absolute;
    top: 100px; /*Height of header*/
    z-index: 0;
}

#footer{
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0px;
}

/*For demo only*/
#header, #footer{
    border: 3px dashed #333333;
    background: #FFFFFF;
}

#content{
    background: #CCCCCC;
    height: 200px;
}

Ответы

Ответ 1

Как вы уже упоминали, position: fixed позиционирует нижний колонтитул относительно области просмотра, а не самой страницы. Поэтому мы должны поддерживать элемент в нормальном потоке и как-то позиционировать его в нижней части страницы.

Существует несколько подходов к достижению этого, которые в свое время обсуждались в дикой природе.
Например:

A List Apart статья Изучение нижних колонтитулов - by Бобби Van Der Sluis, 2004
footerStickAlt - Крейг Эрскин, 2005
Липкий нижний колонтитул - Шелли Коул, 2006
Как сохранить нижние колонтитулы внизу страницы - Мэтью Джеймс Тейлор, 2007
Сделать нижний колонтитул снизу страницы - Райан Файт, 2007
Уточненная версия липкого нижнего колонтитула Ryan Fait - Chris Coyier, 2009
Липкие нижние колонтитулы CSS: гибкий способ (который использует CSS-таблицы) - Torben Haase, 2011
Отзывчивый липкий нижний колонтитул (уточненная версия подхода Торбена) - Джошуа Кук, 2013
Решено Flexbox Липкий нижний колонтитул - Филип Уолтон, 2013 г.

Липкий нижний колонтитул

В этом ответе я бы пошел с методом Райана Файта, поскольку он прост и понятен, а также он отвечает вашим потребностям (ситуации, в которых и верхний и нижний колонтитулы имеют фиксированные высоты).

Учитывая структуру ниже:

<div id="content"> <!-- content goes here. It may (not) include the header --> </div>
<div id="footer">Footer</div>

Необходимы следующие шаги:

Настройка height элементов <html> и <body> на 100%, которая требуется для следующего шага ¹.
Самое главное, что нам нужно сделать, это убедиться, что #content достаточно высок, чтобы нажать #footer вниз по странице. Поэтому мы даем #content a min-height of 100%.
Пока, #content взял 100% высоты окна просмотра, поэтому мы должны потянуть нижний колонтитул, чтобы поместить его на внизу страницы. Для этого мы могли бы дать #content отрицательный margin-bottom эквивалент нижнего колонтитула height. Кроме того, чтобы нижний колонтитул отображался поверх содержимого, мы должны position нижний колонтитул relative ly. Демо здесь.
Как видно, когда #content растет по своему содержанию, часть содержимого выходит за нижний колонтитул. Мы могли бы избежать этого либо путем добавления разделительного элемента в конце #content, либо использовать комбинацию padding-bottom и box-sizing: border-box ² который предположительно будет поддерживаемый в IE8.

4.1 Добавление разделителя

Пример здесь

<div id="content">
    <!-- content goes here -->
    <div class="spacer"></div>
</div>
<div id="footer">Footer</div>

.spacer, #footer { height: 100px; }

4.2 Комбинация `padding-bottom` и `box-sizing`

Обновленный пример

#content {
    min-height: 100%;
    margin-bottom: -100px; /* Equivalent to footer height */
    padding-bottom: 100px; /* Equivalent to footer height */

    box-sizing: border-box;
}

(Обратите внимание, что префиксы поставщиков опущены из-за краткости)

Добавление заголовка

Если заголовок должен оставаться в нормальном потоке, вы можете просто добавить его в #content следующим образом:
(Пример здесь)
```
<div id="content">
    <div id="header">Header</div>
    ...
```
Но если он должен быть позиционирован абсолютно ³ нам нужно нажать содержимое элемента #content вниз, чтобы чтобы предотвратить перекрытие.

Поэтому снова мы могли бы добавить спейсер в начале #content (Пример здесь):

<div id="header">Header</div>
<div id="content">
    <div class="header-spacer"></div> 
    <!-- content goes here -->
    <div class="footer-spacer"></div> 
</div>
<div id="footer">Footer</div>

Или используйте комбинацию padding-top и box-sizing следующим образом:

<div id="header">Header</div>
<div id="content"> <!-- content goes here. --> </div>
<div id="footer">Footer</div>

#content {
    min-height: 100%;
    margin-bottom: -100px; /* Equivalent to footer height */

    padding-top   : 50px;  /* Equivalent to header height */
    padding-bottom: 100px; /* Equivalent to footer height */

    box-sizing: border-box;
}

Обновленный пример (обратите внимание, что префиксы поставщиков опущены из-за краткости)

Наконец, но не менее!

В настоящее время все основные современные веб-браузеры поддерживают box-sizing: border-box объявление (включая IE8). Однако, если вы ищете традиционный способ, который имеет более широкую поддержку браузера, придерживайтесь использования разделительных элементов.

^{1. Это необходимо сделать min-height: 100% для работы с элементом #content (поскольку процентное значение относится к height окна, содержащего установленный блок по <body>). Кроме того, <html> должен иметь явный height, чтобы сделать height: 100% работать с <body>.}

^{2. box-sizing: border-boxделает UAs вычисляет width/height поля, включая отступы и границы.}

^{3. Согласно спецификации, абсолютно позиционированные элементы представляют собой элементы, имеющие position of absolute или fixed.}

Ответ 2

Ты почти понял. Вам нужен контейнер.

Вот мой пересмотренный бит: Обновление JSFiddle

Добавить контейнер div:

<div id="container">
    <div id="header"></div>
    <div id="page"></div>
    <div id="footer"></div>
</div>

Затем сделайте позицию относительной, а высота 100%:

#container {
    height: 100%;
    position: relative;
}

И убедитесь, что позиция является абсолютной для нижнего колонтитула.

Ответ 3

Или для тех, кто нашел это сообщение по googling и хочет еще более короткий ответ, без оберток (потому что они вам не нужны):

html { height: 100%; }
body { min-height: 100%; position: relative; padding-bottom: 3em; }
.footer { height: 3em; position: absolute; bottom: 0; }

страница теперь имеет высоту не менее 100%, а нижний колонтитул находится внизу страницы, а не внизу "экрана". Если страница длиннее экрана, она все равно будет внизу, и мы сделали это без искусственных "элементов-оберток" или таких элементов: элемент body уже является оболочкой, нам нужно =)

Единственное предостережение заключается в том, что поле тела должно быть таким же, как высота нижнего колонтитула, но затем как отрицательное значение, так как правило "bottom: 0" сделает нижний колонтитул начинающим внизу, а не базовым. Опять же, как CSS,.less или .styl, это тривиально обеспечивается.

Ответ 4

Сделать это просто:

#header {
    position: fixed;
    width:100%;
    height:100px;
    top:0px;
    z-index:2;
}
#content, #footer {
    position: relative; /* or leave it static as by default */
    z-index:1;
}
body,div {
    margin:0; padding:0; /* http://jsfiddle.net/css/normalize.css */
}
#content {
    margin-top: 100px; /* the same value as header height */
}

jsfiddle

Ответ 5

But if you want the footer to take full size of the screen while #wrapper is 1000px and centered you would do:


<body>
<div id="wrapper">
<div id="wrapper-inner">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
</body>

html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#wrapper-inner {
margin: 0 auto;
width: 1000px;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
}

Ответ 6

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

Начните с установки высоты для вашего HTML и тела

html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

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

Создать спейсерный класс

.spacer {
    flex: 1; 
}

Так что позже ваш HTML может быть что-то вроде

<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

Вы можете поиграть с этим здесь https://codepen.io/anon/pen/xmGZQL