Прибить футер к низу

Главные вкладки

Аватар пользователя JooKeR JooKeR 19 февраля 2015 в 12:39

Подскажите пожалуйста как можно прибить футер к низу, с помощью этого кода:

<html>  
<body>  
 
<div id="content"></div>  
 
<div id="footer"></div>  
 
</body>  
</html>

CSS-код:

* {  
margin: 0;  
padding: 0;  
}  
html {height: 100%;}  
* html body {height: 100%;}  
body {  
min-height: 100%;  
position: relative;  
}  
#content {  
padding-bottom: 100px;  
}  
#footer {  
position: absolute;  
bottombottom: 0;  
height: 80px;  
}  

Не получается, так как на ноутбуке он прыгает.

Комментарии

Аватар пользователя toshic toshic 24 февраля 2015 в 8:49

пропиши контенту position: relative;
, а из body его убери.
body это хоть тоже обертка третьей вложенности, но content и footer по отношении к нему являются дочерними эллементами и поэтому не работает. В твоём примере они идут в потоке друг за другом.
Когда ты применяешь абсолютное позиционирование , то таким образом ты вырываешь блок из потока и тому блоку , в который ты хочешь его вставить надо задать относительное позиционирование. так как ты пытаешься его вставить в контент, а относительное позиционирование указано для body, то контент служит для блока с абсолютным позиционированием преградой и не дает блоку встать на нужное место.