CSS нижний колонтитул не придерживается нижней части страницы

Question

У меня возникли трудности с настройкой липкого нижнего колонтитула в моей компоновке css. Я пытался использовать идею от http://www.cssstickyfooter.com/, но нижний колонтитул не остается внизу страницы, если содержимое в divs недостаточно велико.

файл CSS:

* { 
margin:0; 
padding:0; 
} 

body { 
height:100%; 
margin:0px; 
padding:0px; 
} 

#wrap { 
min-height: 100%; 
} 

#container { 
overflow:auto; 
padding-bottom: 150px; 
text-align:left; 
width:800px; 
margin:auto; 
} 

#header { 
height:240px; 
margin-top:20px; 
} 

#navigation { 
float:left; 
width:800px; 
margin-top:20px; 
} 

#content-container { 
float:left; 
width: 800px; 
} 

#left { 
clear:left; 
float:left: 
width:480px; 
height: auto; 
margin: 20px 0px 20px 0px; 
padding: 20px 10px 20px 10px; 
} 

#right { 
float:right; 
width:275px; 
height:auto; 
margin: 20px 0px 20px 0px; 
padding: 20px 10px 20px 10px; 
} 

#footer { 
position: relative; 
clear:both; 
height:150px; 
margin-top: -150px; 
} 

#columns { 
width:800px; 
height:150px; 
margin:auto; 
} 

#colleft { 
float:left; 
width:400px; 
height:150px; 
} 

#colright { 
float:right; 
position:relative; 
width:260px; 
height:150px; 
} 

HTML-файл:

<div id="wrap"> 

    <div id="container"> 

     <div id="header"></div> 

     <div id="navigation"> 

      <div id="lang"></div> 

     </div> 

     <div id="content-container"> 

      <div id="left"></div> 

      <div id="right"></div> 

     </div> 

    </div> 

    <div id="footer"> 

     <div id="columns"> 

      <div id="colleft"></div> 

      <div id="colright"></div> 

     </div> 
</div> 

Answer 1

Я считаю, что вам не хватает

html { height: 100%; }

из вашего CSS.

Answer 2

Рассматривали ли вы использование позиции: исправлено?

#footer { position: fixed; bottom: 0px; height:150px; } 

Причина ваш пример не работает, потому что ваш #footer находится внутри #wrap, используя этот КАС, #footer должен быть вне обертке, как это обертка, которая является установка мин-высота до 100%, а #footer поднимается вверх, используя отрицательный запас.

Тег html также нуждается в высоте 100% для работы.

Так что, чтобы повторить, #footer не может быть вложенным, а html требуется высота: 100%;

Пример здесь --- http://jsfiddle.net/CK6nt/

Надежда, что помогает! Laurie

Answer 3

В классе колонтитула:

#footer { 
position: relative; 
clear:both; 
height:150px; 
margin-top: -150px; 
} 

Изменение position: relative; в position:fixed поэтому класс должен выглядеть следующим образом:

#footer { 
position: fixed; 
clear:both; 
height:150px; 
margin-top: -150px; 
} 

Answer 4

Может быть, вам нужно выбрать другой подход. Я использую этот метод для прикрепления нижнего колонтитула к нижнему Stick Footer to bottom with help of CSS3. Он работает только в современных браузерах). Для других работ «изящная деградация» контент остается доступным.