Опять на форуме всплыл вопрос о подобном дизайне (имею в виду
Как бы такое сверстать? ). На эту тему уже
смотреть противно, она как кость в горле.
Для начала я решила найти в тырнете макет трех колонок одинаковой высоты. Готовый макет
нашелся, естественно, в первом же линке, выданном нигмой.
Пример из линка . Решение
основано на применении рисунков в качестве бэкграунда, которые как бы "дорисовывают" левую
и правую колонки до нужной высоты.
К этому макету я приделала хедер с футером.
Результат в приложении и чуть ниже открытым кодом.
- Что получилось:
хедер, три колонки, футер всегда снизу даже при малом количестве текста на странице и при этом
не наезжает на текст при маленькой высоте окна (как то бывает при position:absolute). Левая и
центральная колонки занимают всю высоту от хедера до футера.
- Что не получилось:
объяснить правой колонке, что она тоже должна быть от хедера до футера. Найти общий язык с
Оперой.
Опера как не хотела всегда вовремя рендерить страницу, так и не хочет. Если растягивать макет
только вниз, то ниже футера появляется пустое место. Если после этого потянуть в ширину (или
сразу растягивать по ширине и высоте одновременно), то она вспоминает, что неплохо бы привести
страницу в соответствие с версткой. Править баги в Опере я не собираюсь, поэтому считаю, что не
получилось только организовать правильно правую колонку.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
<!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" lang="en" xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>трехколонный макет, футер снизу</title>
<style type="text/css">
html, body { margin: 0 ; padding: 0 ; height: 100 %; width: 100 %; }
#main {
height: auto !important;
height: 100 %;
min-height: 100 %;
margin: 0 auto;
background: # 999 url(bg-left.gif) repeat-y left;
width: 100 %;
min-width: 800px;
width: expression(((document.documentElement.clientWidth || document.body.clientWidth) < 800 )? "800px" : "100%");
}
#header {
background: #cda;
height: 100px;
margin: 0 auto -100px;
position: relative;
}
#footer {
background: #cad;
height: 70px;
margin: -70px auto 0 ;
clear: both;
}
#columns {
padding: 100px 0 70px 0 ;
overflow: hidden;
width: 100 %;
}
#wrap {
float: left; width: 100 %; margin-right: -240px;
background: # 999 url(bg-right.gif) repeat-y right;
}
#container {
margin-right: 240px;
height: 100 %;
background: # 999 url(bg-left.gif) repeat-y left;
}
#left { float: left; width: 240px; background-color: #b0dbf2; }
#right { float: right; width: 240px; background-color: #abb3f8; }
#content { margin-left: 240px; background-color: # 999 ; }
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">
<div id="columns">
<div id="wrap">
<div id="container">
<div id="left">
left left left left left
</div>
<div id="content">
content <br>content content <br>content content <br>content content <br>content content content content
</div>
</div>
</div>
<div id="right">
right right right
</div>
</div>
</div>
<div id="footer">
footer footer footer footer footer
</div>
</body>
</html>
Дополнительно к этому исходнику понадобятся еще два рисунка-фона для левой и правой колонок
(есть в приложении). Выглядят как узкие горизонтальные полоски цвета фона колонок.
