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

Тема в разделе "Верстка", создана пользователем NoName013, 9 дек 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. NoName013

    NoName013 Постоялец

    Регистр.:
    10 ноя 2013
    Сообщения:
    80
    Симпатии:
    18
    Прижимаю футер к низу страницы используя отрицательный отступ блока 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 на всю всю высоту страницы?
     
  2. Black#FFFFFF

    Black#FFFFFF

    Регистр.:
    19 июл 2007
    Сообщения:
    174
    Симпатии:
    107
    Я может чего-то не понимаю. Если вы хотите зафиксировать нижний блок 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
     
  3. Stas-P

    Stas-P

    Регистр.:
    7 сен 2013
    Сообщения:
    165
    Симпатии:
    125
    Беда в том, что height: и min-height: в процентах, не решают данную проблему.
    Раньше было проще при верстке таблицами, там можно было задать высоту процентами и все было как надо.
    Так что выход - это футер position fixed; bottom: 0;
     
  4. NoName013

    NoName013 Постоялец

    Регистр.:
    10 ноя 2013
    Сообщения:
    80
    Симпатии:
    18
    Я вас правильно понял? Если да, то ничего не вышло.

    Код:
    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; то он перестанет отталкиваться от контента (в случаи если контента будет больше высоты окна браузера) по идее. Или я чего-то не понимаю.