Как прижать футер к низу страницы?

[05.07.2011 | 12:56]

Подскажите самое удачное на ваш взгляд решение

Оценить:+|–

Комментировать

Раздел: Помощь
Просмотров: 2281

Комментариев (4)

Григорий Кочнев [Greg]
05.07.2011 в 13:30
Я пользуюсь таким: первый блок 100% по высоте global , он как бы распирает и прижимает к низу подвал, при этом появляется вертикальная прокрутка, она убирается минусовым маргином вверх (margin-top:-100px;). А чтоб шапка не уехала за верхние пределы экрана пишем .container {padding-top:100px;}

HTML
```
<div class="global">
  <div class="container">
       CONTENT
  </div>
</div>

<div class="footer">
      FOOTER
</div>
```
CSS
```
html, body {height:100%;}
.container {padding-top:100px;}
.global {margin-top:-100px; min-height:100%;}
```
CSS для ИЕ
```
* html .global {height:100%;}
```
Единственное ограничение, что высота подвала не динамическая, в данном примере до 100пх.
Если надо больше, то надо подправить CSS.

Работающий пример тут:

116_footerrar.rar
Войдите, чтобы ответить
Оценить:+|–0
Андрей Данилов [Deff]
08.07.2011 в 09:55
А я задаю для html высоту 100%, для body задаю min-height:100% (для ИЕ6 — height:100%) и position:relative. А футер вывешиваю абсолютом.

Второй вариант — яваскриптом считать высоту окна браузера и задавать высоту для того же body
```
$("body").css('height',$('window').height())
```
Войдите, чтобы ответить
Оценить:+|–0
- Константин [kost]
  08.07.2011 в 18:20
  А что скажете насчет такого кода:
  HTML
  
  div class="page"> <p>Контент</p> <div class="garant"></div> </div> <div class="footer"> <p>Текст в футере</p> </div>
  
  CSS
  
  html, body { height:100%; } .page { min-height:100%; height:auto !important; height:100%; margin:0 auto -100px; } .footer, .garant { height:100px; }
  Войдите, чтобы ответить
  Оценить:+|–0
  - Григорий Кочнев [Greg]
    08.07.2011 в 21:27
    
    По сути те же яйца тока с боку примера, что я показал.
    У меня верхний отрицательный маргин, тут нижний. :)
    
    Войдите, чтобы ответить
    Оценить:+|–0