липкий нижний колонтитул CSS сломанный

Question

Мой нижний колонтитул предназначен для того, чтобы оставаться в нижней части страницы, даже если над ним над ним только небольшое количество контента. Он работал до недавнего времени, и я, кажется, как-то сломал его. Можете ли вы взглянуть?

Заранее спасибо.

CSS:

body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    font: 100% Helvetica, sans-serif, Arial, sans-serif; 
    color: #000; 
    background-color: #FFF; 
    background-image: url(images/BGmain.png); 
    background-repeat: repeat-x; 
} 
/*---------- 
Div styles 
----------*/ 
#container { 
    min-height: 100%; 
    position: relative; 
} 
.header { 
    padding: 0 0 230px 0; 
    text-align: center; 
    background-image: url(images/BGlogo_55top.png); 
    background-repeat: no-repeat; 
    background-position: top; 
} 
.column1 { 
    padding-bottom: 50px; 
    width: 960px; 
    margin: 0 auto; 
    position: relative; 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 50px;   
    text-align: center; 
} 
/*---------- 
Other 
----------*/ 
.plainimg { 
    border-style: none 
} 
/*---------- 
Text styles 
----------*/ 
p { 
    font-size: 80%; 
    color: #333; 
    line-height: 150%; 
    text-align: left; 
    padding: 1px 15px 1px 15px; 
} 
h1 { 
    font-size: 100%; 
    color: #000; 
    padding: 0; 
} 
h2 { 
    font-size: 100%; 
    font-weight: 500; 
    color: #000; 
    padding: 0; 
    text-align: center; 
} 
/*---------- 
Links 
----------*/ 
a.navlink:link, a.navlink:visited { 
    text-decoration: none; 
    display: inline-block; 
    color: #F1F1F1; 
    width: 120px; 
    text-align: center; 
    padding: 0 0 3px 0; 
    font-size: 80%; 
} 
a.navlink:hover, a.navlink:active { 
    text-decoration: none; 
    display: inline-block; 
    color: #FFF; 
    background-color: #000; 
    width: 120px; 
    text-align: centre; 
    padding: 0 0 3px 0; 
    font-size: 80%; 
} 
a:link, a:visited { 
    text-decoration: none; 
    color: #AEAEAE; 
} 
a:hover, a:active { 
    text-decoration: underline; 
    color: #999 
} 

Компоновка ДИВ выглядит следующим образом:

<div id=container> 
<div class=header></div> 
<div class=column1></div> 
<div class=footer></div> 
</div> 

Answer 1

Как сказал Джейсон Маккрири, вам нужно добавить высоту к CSS html.

Использование:

html 
{ 
    height:  100%; 
    margin:  0; 
    padding: 0; 
} 

На страницах это вызывает посторонний скроллбар по некоторым причинам.

UPDATE:
Полоса прокрутки, как представляется, вызвана переполнением .footer h6.
Добавление: bottom: 2.5ex; и line-height: 1; к изображению footer, похоже, очищает это.

Но лучший способ - использовать a CSS reset.

При отсутствии сброса, как минимум, добавить:

.footer h6 { 
    margin: 0; 
    padding: 0; 
} 

.

A CSS reset также позволит свести к минимуму кросс-браузерные изменения, которые разрушают макет с платформы на платформу.

Answer 2

Взгляните на это: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Когда сломался для меня в прошлом, я обычно имею что-то в содержании, которое является виновником - заполнение, недопустимая разметка и т. д. Если вы разместите ссылку на свою страницу, вы можете найти более конкретный ответ.

Answer 3

Вот ваша проблема:

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

Вот исправление:

#container { 
min-height:100%; 
} 

Хороший материал:

http://www.w3schools.com/Css/pr_class_position.asp

Answer 4

решаемая. Простое решение Просто поместите свой нижний колонтитул вне своей Контейнерной дивизии.

<div id=container> 
    <div class=header></div> 
    <div class=column1></div> 
</div> 
<div class=footer></div>