Резиновый макет сайта от фиксированного отличается тем, что ширина колонок может меняться в зависимости от разрешения экрана.
HTML разметка резинового макета.
Файл index.html представляет собой блочную верстку.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Резиновый макет сайта</title>
</head>
<body>
<div class="wrapper">
<div class="head">
<h1>Шапка сайта</h1>
</div>
<div class="sidebar">
<h2>Сайдбар</h2>
</div>
<div class="content">
<h2>Контент</h2>
</div>
<div class="advert">
<h2>Рекламный блок</h2>
</div>
<div class="footer">
<h2>Подвал</h2>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Резиновый макет сайта</title>
</head>
<body>
<div class="wrapper">
<div class="head">
<h1>Шапка сайта</h1>
</div>
<div class="sidebar">
<h2>Сайдбар</h2>
</div>
<div class="content">
<h2>Контент</h2>
</div>
<div class="advert">
<h2>Рекламный блок</h2>
</div>
<div class="footer">
<h2>Подвал</h2>
</div>
</div>
</body>
</html>
CSS стили резинового макета.
В файле style.css пишем стили.
html, body {
height: 100%;
background: #000;
}
.wrapper {
margin: 0 auto;
width: 90%;
max-width: 1200px;
height: 100%;
overflow: hidden;
}
.head {
width: 100%;
height: 100px;
text-align: center;
background: #ccc;
margin: 0.5% 0;
}
.sidebar {
float: left;
width: 20%;
height: 70%;
text-align: center;
background: #ccc;
margin: 0.5% 0.5% 0.5% 0;
}
.content {
background: #ccc;
width: 58%;
float: left;
margin: 0.5%;
height: 70%;
text-align: center;
}
.advert {
background: #ccc;
width: 20%;
float: right;
margin: 0.5% 0 0.5% 0.5%;
height: 70%;
text-align: center;
}
.footer {
background: #ccc;
margin: 0.5% 0;
height: 70px;
float: left;
overflow:hidden;
width: 100%;
text-align: center;
}
height: 100%;
background: #000;
}
.wrapper {
margin: 0 auto;
width: 90%;
max-width: 1200px;
height: 100%;
overflow: hidden;
}
.head {
width: 100%;
height: 100px;
text-align: center;
background: #ccc;
margin: 0.5% 0;
}
.sidebar {
float: left;
width: 20%;
height: 70%;
text-align: center;
background: #ccc;
margin: 0.5% 0.5% 0.5% 0;
}
.content {
background: #ccc;
width: 58%;
float: left;
margin: 0.5%;
height: 70%;
text-align: center;
}
.advert {
background: #ccc;
width: 20%;
float: right;
margin: 0.5% 0 0.5% 0.5%;
height: 70%;
text-align: center;
}
.footer {
background: #ccc;
margin: 0.5% 0;
height: 70px;
float: left;
overflow:hidden;
width: 100%;
text-align: center;
}
Обратите внимание, что ширину и высоту блоков в большинстве случаев мы указываем в процентах.
Проверка и тестирование на «резиновость».
На «резиновость» макет можно проверить следующим обазом:
Открываем макет в любом браузере, сворачиваем окно браузера нажав на значёк в правом верхнем углу.
И с помощью мыши меняем размер окна браузера. Макет при этом будет «адаптироваться» под размеры окна браузера.
Как сделать фиксированный макет сайта читайте здесь.