[Вопрос] Растянуть блок контента если футер прижат к низу страницы

NoName013

NoName013

Постоялец
Регистрация
10 Ноя 2013
Сообщения
80
Реакции
23
Прижимаю футер к низу страницы используя отрицательный отступ блока page-wrapper. Думаю всем известный метод. Много где описанный.

Вот код index.html
HTML: 
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<body>
<div class="page-wrapper">
<div class="content">content</div>
<div class="page-buffer"></div>
</div>
<div class="page-footer">
footer
</div>
</body>

style.css
Код: 
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.page-wrapper {
    min-height: 100%;
    margin-bottom: -50px;
}
* html .page-wrapper {
    height: 100%;
}
.page-buffer {
    height: 50px;
}
.content {
    width: 900px;
    margin: 0 auto;
    border: 2px solid black;
}

Вопрос: как растянуть блок content на всю всю высоту страницы?
 
Я может чего-то не понимаю. Если вы хотите зафиксировать нижний блок page-footer: .page-footer{ position fixed; bottom: 0; left: 0; right: 0; z-index: 10 /* z-index больше, чем у блока контента, чтобы не перекрывался */} вот вам и 100% пейдфутер закрепленный внизу страницы. Для 100% высоты вреппера можно использовать min-height: определенный для .content, а также clearfix + css media queries
 
Беда в том, что height: и min-height: в процентах, не решают данную проблему.
Раньше было проще при верстке таблицами, там можно было задать высоту процентами и все было как надо.
Так что выход - это футер position fixed; bottom: 0;
 
Я вас правильно понял? Если да, то ничего не вышло.

Код: 
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.page-wrapper {
    min-height: 100%;
    margin-bottom: -50px;
}
* html .page-wrapper {
    height: 100%;
}
.page-buffer {
    clear;
}
.content {
    width: 900px;
    height: 100%;
    min-height: 100%;
    clear: both;
    margin: 0 auto;
    border: 2px solid black;
}
.page-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10
}


Кстати, если у футера будет position: fixed; и bottom: 0; то он перестанет отталкиваться от контента (в случаи если контента будет больше высоты окна браузера) по идее. Или я чего-то не понимаю.
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху