Пропадает подвал

Vlad · January 26, 2011

Есть макет на трех колонках. Для формирования используется связка relative и absolute у position, при этом подвал оказывается под колонками. Есть какие-то способы сдвинуть его под все колонки, чтобы он опускался автоматически исходя из высоты контента?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Три колонки</title>
  <style type="text/css">
  .header, .footer { background: #D5BAE4; }
  .layout { 
  position: relative; /* Относительное позиционирование */
  }
  .layout DIV { 
   position: absolute; /* Абсолютное позиционирование */ 
   }
  .col1 {
  background: #C7E3E4; /* Цвет фона */
   left: 0; 
   right: 300px;
  }
  .col2 { 
  background: #E0D2C7; 
  width: 200px; /* Ширина колонки */
  right: 100px; /* Сдвигаем влево на ширину колонки 3 */
  }
  .col3 { 
  background: #ECD5DE; width: 100px; right: 0;
  }
  </style>
 </head>
 <body>
  <div class="header">Шапка сайта</div>
  <div class="layout">
    <div class="col1">Колонка 1</div>
    <div class="col2">Колонка 2</div>
    <div class="col3">Колонка 3</div>
  </div>
  <div class="footer">Подвал</div>
 </body>
</html>

psywalker · January 26, 2011

Не пойдёт?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Три колонки</title>
<style type="text/css">
.header, .footer { background: red; }
.footer { background: blue; }
.layout {
position: relative;
padding-bottom: 20px;/* Относительное позиционирование */
}
.layout DIV {
position: absolute; /* Абсолютное позиционирование */
}
.col1 {
background: #C7E3E4; /* Цвет фона */
left: 0;
right: 300px;
}
.col2 {
background: #E0D2C7;
width: 200px; /* Ширина колонки */
right: 100px; /* Сдвигаем влево на ширину колонки 3 */
}
.col3 {
background: #ECD5DE; width: 100px; right: 0;
}
</style>
</head>
<body>
<div class="header">Шапка сайта</div>
<div class="layout">
<div class="col1">Колонка 1</div>
<div class="col2">Колонка 2</div>
<div class="col3">Колонка 3</div>
</div>
<div class="footer">Подвал</div>
</body>
</html>

psywalker · January 26, 2011

А вообще нет вариантов, ведь родительский контейнер абсолюта имеет нулевую высоту по-идее.

Vlad · January 26, 2011

Спасибо за подсказку, но не пойдет. Достаточно добавить height: 400px к любой колонке и подвал скроется из вида. Видимо для этого метода обычный подвал не катит. Придется делать что-то вроде фиксирования подвала внизу или устанавливать высоту колонок явно.

psywalker · January 26, 2011

Спасибо за подсказку, но не пойдет. Достаточно добавить height: 400px к любой колонке и подвал скроется из вида. Видимо для этого метода обычный подвал не катит. Придется делать что-то вроде фиксирования подвала внизу или устанавливать высоту колонок явно.

Ага.

Sign In

Пропадает подвал

Question

Vlad

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information