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

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





  • Только не с ним 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;

}
651   5  

5 ответов:

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

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

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

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

Рассматривая структуру ниже: 

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

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

  1. Установка height элементов <html> и <body> в 100%, которая требуется для следующего шаг1.

  2. Самое важное, что нам нужно сделать, - это убедиться, что #content достаточно высоко, чтобы сдвинуть #footer вниз по странице. Следовательно, мы даем #content a min-height из 100%.

  3. До сих пор , #content занял 100% высоты окна просмотра, таким образом, мы должны подтянуть нижний колонтитул вверх, чтобы поместить его в нижней части страницы. Для этого мы могли бы дать #content отрицательный margin-bottom эквивалент height нижнего колонтитула. Также сделать конечно, что нижний колонтитул появляется поверх содержимого, мы должны position нижний колонтитул relative ly. Демо Здесь.

  4. Как можно видеть, когда #content растет по своему содержанию, часть содержимого уходит за нижний колонтитул. Мы могли бы избежать этого, либо добавив разделительный элемент в конце #content, либо используя комбинацию padding-bottom и box-sizing: border-box2 который, как предполагается, также поддерживается на 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's height */
    padding-bottom: 100px; /* Equivalent to footer's height */

    box-sizing: border-box;
}

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

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

  1. Если заголовок должен оставаться в нормальном потоке, вы можете просто добавить его в #content следующим образом:
    (пример Здесь)

    <div id="content">
    <div id="header">Header</div>
    ...

  2. Но если он должен быть расположен абсолютно3, нам нужно протолкнуть содержимое элемента #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's height */

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

    box-sizing: border-box;
}

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

Наконец-то, но не в последнюю очередь!

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

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

2. box-sizing: border-box делает UAs вычислить width/height коробки, включая обивку и бордюры.

3. согласно спецификации, абсолютно расположенными элементами являются элементы, имеющие position из absolute или fixed.

32  
2014-09-13 01:33:21

У тебя почти получилось. То, что вам нужно, - это контейнер.

Вот мой исправленный бит: Jsfiddle Update

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

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

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

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

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

3  
2013-08-27 18:20:47

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

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

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

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

3  
2015-06-05 22:08:30

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

#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's height */
}

Jsfiddle

0  
2013-08-27 19:50:34 
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;
}
0  
2015-01-22 08:08:18

Comments

    Ничего не найдено.
Click here to cancel reply.