Положить нижний колонтитул в нижней части страницы

Question

Я хочу поставить нижний колонтитул в нижней части страницы (или в нижней части экрана, если страница короче экрана). Я использую код:

<div id="wrapper"> 
    <div id="header-wrapper"> 
    ... 
    </div> <!--header-wrapper--> 

    <div class="clear"></div> 

    <div id="body-wrapper"> 
     <div class="row960"> 

      <div class="menu">...</div> 

      <div class="content">...</div> 

     </div> <!--row960--> 
    </div> <!--body-wrapper--> 

    <div class="clear"></div> 

    <div id="footer-wrapper" class="gray"> 

    </div> <!--footer-wrapper--> 

</div> <!--wrapper--> 

и CSS:

.clear{ 
    clear:both; 
    display:block; 
    overflow:hidden; 
    visibility:hidden; 
    width:0; 
    height:24px; 
    margin:0px 
} 

html, body{ 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
} 

body{ 
    background-color: #000000; 
    color: #FFFFFF; 
    font-size: 14px; 
} 

#wrapper{ 
    min-height: 100%; 
    position: relative; 
} 

#header-wrapper{ 
    height: 100px; 
} 

#body-wrapper{ 
    padding-bottom: 50px; 
} 

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

.row960{ 
    width: 960px; 
    margin: auto; 
    overflow: auto; 
} 

#menu{ 
    width: 200px; 
    float: left; 
} 

.content{ 
    width: 740px; 
    margin-left: 20px; 
    float: right; 
} 

Проблема заключается в том, что колонтитул в нижней части экрана, даже если страница длиннее, чем экран (он охватывает текст). Я проверил его с Firebug и body-wrapper имеет правую высоту, но row960 имеет высоту экрана вместо высоты страницы. Я не могу понять, как это исправить. Есть ли у кого-нибудь идеи, что делать?

Вы можете увидеть мою страницу на http://www.domenblenkus.com/fiap/notice.php

Спасибо за вашу помощь!

EDIT: Я не знаю, подчеркнул ли я это достаточно, поэтому я хотел бы указать на то, что главная проблема заключается в том, что высота row960 неверна.

Answer 1

Хм, думаю, у меня есть решение, соответствующее вашим требованиям. Конечно, есть и другие способы сделать это, поэтому вы можете продолжать оглядываться, если не согласны с этим методом. (Кроме того, когда я смотрел на сайте оказалось, что ваш #wrappper элемент был родственный #footer-wrapper, а не родитель.)

Таким образом, HTML будет выглядеть (структура скопированной с вашего сайта):

<div id="wrappper"> 
    <div id="header-wrapper" class="gray"> 
    <div class="clear"></div> 
    <div id="body-wrapper"></div> 
    <div class="clear"></div> 
    <div class="spacer"></div> 
</div> 
<div id="footer-wrapper" class="gray"></div> 

Обратите внимание на добавление элемента .spacer в нижней части #wrappper, это необходимо для этого подхода «липкой нижней колонтитула».

Теперь CSS вам нужно добавить (добавить в любые существующие определения, если у вас уже есть):

body, html{ 
    height: 100%; 
} 
#wrappper{ 
    min-height: 100%; 
    margin-bottom: -50px; 
    height: auto; 
} 
.spacer{ 
    height: 50px; 
} 

Если вы задаетесь вопросом, почему я выбрал 50px для высоты, это потому, что это высота элемента нижнего колонтитула, #footer-wrapper.

В любом случае, я действительно тестировал это на консоли Firebug, поэтому я не уверен, как он будет вести себя в живой среде, но я уверен, что это даст вам то, что вы хотите. Если это не то, что вы искали, сообщите мне, и я буду рад помочь вам!

Answer 2

Если вы хотите его внизу, вам не нужна позиция: абсолютная или нижняя: 0, это будет в нижней части вашего div в любом случае.

Answer 3

Вы можете попробовать сделать это, используя margin. Вот сценарий того, что я принимаю: http://jsfiddle.net/8WLyP/

В основном для вашего HTML, размещайте весь контент внутри элемента «контейнер», а затем ваш нижний колонтитул будет братом этого элемента.

Затем в CSS, что вам нужно, чтобы дать им html и body элементы а min-height: 100% Вы элемент «контейнер» также будет иметь min-height: 100%

Вам будет нужно дать футер height из X, в мой пример - 50 пикселей. Элемент «контейнер» должен иметь margin-bottom: -50px или любое другое значение, которое вы придаете высоте нижнего колонтитула.

Со всем этим сделано, убедитесь, что вы не даете «контейнеру» и «нижнему колонтитулу» любые другие поля или прокладки, чем показанные, если вам нужно их предоставить, тогда вам нужно будет отдать его ребенку элементы, в моем примере p элемент.

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

HTML:

<div id="container"> 
    <header> 
     <p>Header</p> 
    </header> 
    <section> 
     <p>Section</p> 
    </section> 
</div> 

<footer> 
    <p>Footer</p> 
</footer> 

CSS:

html, body, header, footer, section, p, div { 
    margin: 0; 
    padding: 0; 
} 

html, body { 
    height: 100%; 
} 

p { 
    padding: 5px 10px; 
} 

header { 
    width: 100%; 
    background: #f00; 
    color: #fff; 
} 

section { 
    width: 100%; 
    height: 200px; 
    background :#0f0; 
    color: #fff; 
} 

#container { 
    width: 100%; 
    min-height: 100%; 
    margin-bottom: -50px; 
} 

footer { 
    width: 100%; 
    background :#00f; 
    color: #fff; 
    height: 50px; 
} 

Answer 4

Вы хотите поместить колонтитул в нижней части содержания. НО: Вы хотите иметь его в нижней части окна просмотра (окна), если содержание выше его короче.

Итак, попробуйте следующее:

СМЧ:

#footer-wrapper { 
    position: relative; 
    width: 100%; 
    height: 50px; 
} 

#body-wrapper { 
    position: relative; 
    height: 100%; 
} 

& hellip; и JavaScript (Jquery):

var bodyWrap  = $('#body-wrapper'), 
    footerWrap = $('#footer-wrapper'), 
    windowHeight = $(window).height(); 

var heightRemaining = parseInt(windowHeight - bodyWrap.outherHeight() - footerWrap.outerHeight()); 

if (heightRemaining > 0) bodyWrap.css('min-height', heightRemaining); 

Не проверить это из-за короткое время.

Дайте ему попробовать.