1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

[Помогите] не тянется во все стороны сайт

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем сергей87, 31 июл 2013.

  1. сергей87

    сергей87

    Регистрация:
    31 июл 2013
    Сообщения:
    1
    Симпатии:
    0
    Добрый день!

    Не получается сделать чтобы сайт растягивался во все стороны при фиксированном центральном поле.
    Помогите прижать футер, так чтобы он растягивался от фиксированной части и вниз.


     
  2. BartyHan

    BartyHan

    Регистрация:
    22 мар 2013
    Сообщения:
    11
    Симпатии:
    8
    Вот Вам пример прижатия футера:

    HTML:
    <html>
    <head>
    <title>Футер прижат к низу</title>
    <style type="text/css">
    * {margin: 0; padding: 0;} /* обнуляем отступы */
    body {
    background: #fff;
    }
    html,body {
    height: 100%; /* задаем высоту тела документа */
    }
    .main { /* основной блок, который должен растянуться до подвала */
    background: #999; /* цвет фона основного блока (для наглядности) */
    min-height: 100%; /* задаем минимальную высоту основного блока */
    }
    * html .main { /* хак для ie6 */
    height: 100%; /* для ие6, т.к. не понимает min-height */
    }
    .hFooter { /* это распорка в основном блоке - резервируем место для подвала */
    height: 40px; /* высота нашего подвала */
    }
    .footer { /* подвал */
    background: #0000CC; /* цвет фона подвала (для наглядности) */
    color: #fff;
    height: 40px; /* высота подвала */
    margin-top: -40px; /* делаем отрицательный отступ по высоте равный высоте подвла, чтобы четко вписаться в размер экрана */
    }
    </style>
    </head>
    <body>
    <div class="main">
    &nbsp;&nbsp;Это основной блок
    &nbsp;&nbsp;<div class="hFooter"></div>
    </div>
    <div class="footer">Это подвал</div>
    </body>
    </html>
    
     
  3. Misterio

    Misterio

    Регистрация:
    7 авг 2013
    Сообщения:
    14
    Симпатии:
    1
    решение гораздо проще чем вы думаете,
    HTML:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Документ без названия</title>
    </head>
    <style>
    body, html {margin:0; padding:0;}
    header .wrapper {
    background:#0CC;
    height: 100px;
    }
    footer .wrapper {
    background:#ddd;
    height: 100px;
    }
    section .wrapper {
    background:#ccc;
    height: 100px;
    }
    .wrapper {
    width: 980px;
    margin:0 auto;
    }
    </style>
    <body>
    <header>
    <div class="wrapper">
    {text}
    </div>
    </header>
    <section>
    <div class="wrapper">
    {text}
    </div>
    </section>
    <footer>
    <div class="wrapper">
    {text}
    </div>
    </footer>
    </div>
    </body>
    </html>
    
     
  4. art-denis

    art-denis

    Регистрация:
    2 авг 2013
    Сообщения:
    45
    Симпатии:
    6
    Да - это решение хорошее, чуток под себя допилил, и мне тоже помогло