<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Результат - Идентификаторы</title>
  <style type="text/css">
   html, body {
    margin: 0;
    height: 100%;
    background: #66ff66;
   }
   #navigation {
    float: left;
    width: 200px;
    height: 100%;
    background: #ff6666;
   }
   #sidebar {
    float: right;
    width: 200px;
    height: 100%;
    background: #6666ff;
   }
   #content {
    height: 100%;
    background: #ffffff;
    margin: 0 220px;
   }
  </style>
 </head>
 <body>
  <div id="navigation">Навигация.</div>
  <div id="sidebar">Дополнительное меню.</div>
  <div id="content">Контент.</div>
 </body>
</html>

Чтобы убрать поля по краям страницы, надо применить свойство margin к тегу <BODY>. Чтобы средняя колонка была резиновой, ей просто не надо задавать никакую ширину. Кстати, при уменьшении окна браузера, правая колонка может съехать вниз, чтобы этого не происходило, можно задать минимальную ширину страницы с помощью свойства min-width, к какому тегу его применять — думайте сами, скажу только, что их есть два на выбор.

Теперь о том, как растянуть страницу по высоте окна браузера. В нашем случае процентная высота колонок считается относительно тега <BODY>, а его высота — относительно <HTML>. Поэтому, чтобы растянуть колонки, надо у всех этих тегов явно задать высоту в 100%. Кстати, если вы до этого додумались сами — ставьте себе жирный плюс! Я в свое время самостоятельно не смог догадаться, мне подсказали, так что вот. :)

Вернуться в урок → Перейти к следующему уроку