Здравствуйте, подскажите пожалуйста:
Нужно сверстать макет, состоящий из футера, хедера и трёх колонок.
Я макет сверстал, но не знаю как растянуть колонки от футера до хедера, чтобы футер был всегда привязан к дну окна браузера, а хедер к верху окна браузера.
Делаю так:
<html>
<head>
<style type="text/css">
*
{
padding: 0;
margin: 0;
}
html, body
{
height: 100%;
}
body
{
background: #fff;
color: #000;
font: 12px Tahoma, Helvetica, Arial, Verdana;
}
.wrap
{
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
width: 1000px;
margin: 0 auto;
}
.clear
{
clear: both;
height: 0;
padding: 0;
margin: 0;
overflow: hidden;
}
.empty
{
height: 100px;
}
.footer
{
position: relative;
height: 100px;
background: #ddd;
width: 1000px;
margin: -100px auto;
}
/* other styles */
.header, .footer, .sidebar-left, .sidebar-right, .content
{
font-size: 24px;
background: #eee;
}
.header
{
height: 100px;
}
.sidebar-left, .sidebar-right
{
width: 200px;
background: #ccc;
}
.sidebar-left
{
float: left;
}
.sidebar-right
{
float: right;
}
.content
{
background: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<div class="header">
Шапка
</div>
<div class="sidebar-left">
Левая колонка
</div>
<div class="sidebar-right">
Правая колонка
</div>
<div class="content">
Центральная колонка
</div>
<div class="clear">
</div>
<div class="empty">
<!-- -->
</div>
</div>
<div class="footer">
Футер
</div>
</body>
</html>
