Тянем DIV

апреля
2
2011
Сайтостроение

Очень часто новички, создавая своё первое детище используют обыденные и привычный шаблон, который состоит из шапки, навигационного меню, блока контента и футера (header-content-sidebar-footer). Вот как выглядит такой шаблон:

И всё вроде бы хорошо. Однако сам помню, как впервые столкнулся с проблемой, когда нужно было, чтобы сайдбар, имел такую же высоту как и блок контента, т.е. по рабоче-крестьянски это звучит так: «Дотянуть DIV до футера». Решение этой как оказалось простой задачи ниже:

<html>
<head>
<title>Sample Page</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="block">
<div id="header">Header</div>
 <div id="content">
 Content
 </div>
 <div id="sidebar">
 Sidebar
 </div>
</div>
<div id="footer">
 Footer
</div>
</body>
</html>

body {
 font:24px Tahoma;
 text-align:center;
 color: #fff;
}

#header {
 height:80px;
 border-bottom:1px #666 solid;
 background-color:#ddd;
}

#block {
 width:800px;
 margin:0 auto;
 overflow: hidden;
 border:1px #666 solid;
}

#content {
 float:left;
 width:600px;
 height:400px;
 background-color:#eee;
}

#sidebar {
 float:right;
 width:200px;
 margin-left:-150px;
 margin-bottom: -2000em;
 padding-bottom: 2000em;
 border-left:1px #666 solid;
 background-color:#aaa;
}

#footer {
 height: 75px;
 width: 800px;
 border:1px #666 solid;
 border-top:none;
 clear: left;
 margin: 0 auto;
 background-color:#ddd;
}

Вот впринципе и все. Скачать исходник можно здесь. Если есть какие-то вопросы, можете задавать их тут, либо поискать ответ на форуме вебмастеров.

Не пропустите, это тоже интересно!

К этой записи 2 комментария

  • григорий пишет:
    08.04.2011 в 12:25

    Спасибо.Я как раз из новичков.Пока возьму в закладки,знаний маловато.

    Ответить
    • StaFox пишет:
      08.04.2011 в 17:29

      Пожалуйста. Подписывайтесь на RSS ленту, будет много интересного!

      Ответить

Оставить комментарий