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

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

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

  1. сергей87

    сергей87

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

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


     
    сергей87, 31 июл 2013
    #1
  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>
     
    BartyHan, 2 авг 2013
    #2
  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>
     
    Misterio, 7 авг 2013
    #3
  4. art-denis

    art-denis

    Регистрация:
    2 авг 2013
    Сообщения:
    45
    Симпатии:
    6
    Да - это решение хорошее, чуток под себя допилил, и мне тоже помогло
     
    art-denis, 17 авг 2013
    #4
< Как Вам будет удобней добавлять стили/скрипты | Ссылки внутри страницы >