Разное

Трехколоночный макет на div с одинаковой высотой

Не секрет, что блоки div по умолчанию растягиваются по ширине на 100%, а по высоте только до размера содержимого. Я искал решение этой проблемы, находил различные варианты, но только один из них смог достаточно хорошо справиться с этой задачей.


А задача заключалась в следующем:

  • Адекватная работа во всех браузерах.
  • Без использования хаков css (хотя без этого не обошлось).
  • Без использования javascript.
  • Желательно понятный и небольшой код решения (чтобы потом не запутаться что и куда нужно лепить :) ).

Ниже представляю вам макет из трех колонок. Смотрим код css:

1 .cols{
2     width: 1000px;
3     margin-left: auto;
4     margin-right:auto;
5     overflow:hidden;
6     _zoom:1;/*Для 6-го IE, задаем hasLayout*/
7 }
8 .cols .col1,.cols .col2,.cols .col3{
9      padding-bottom:10000px;
10      margin-bottom:-10000px;
11 }
12  
13 .col1  {
14     background-color: green;
15     float:left;
16     width: 300px;
17     overflow:hidden;
18     position:relative;
19 }
20  
21 .col2 {
22     background-color:blue;
23     float:left;
24     width: 400px;
25     overflow:hidden;
26     position:relative;
27  
28 }
29  
30 .col3  {
31     background-color:yellow;
32     float:left;
33     overflow:hidden;
34     width: 300px;
35     position:relative;
36  
37 }

Здесь .cols – контейнер для трех колонок с суммарной шириной этих колонок. А фокус заключается в задании div свойств:

1 .cols {
2     overflow:hidden;
3 }
4 .всем_остальным {
5     padding-bottom: 10000px;
6     margin-bottom: -10000px;
7 }

Этот код растягивает блоки div до высоты контейнера. В свою очередь высота контейнера задается самой высокой колонкой. HTML-код выглядит следующим образом:

1 <html>
2 <head>
3 <style type="text/css">
4 .cols{
5     width: 1000px;
6     margin-left: auto;
7     margin-right:auto;
8     overflow:hidden;
9     _zoom:1;/*Для 6-го IE, задаем hasLayout, на эту тему есть много постов на хабре*/
10 }
11 .cols .col1,.cols .col2,.cols .col3{
12      padding-bottom:10000px;
13      margin-bottom:-10000px;
14 }
15  
16 .col1  {
17     background-color: green;
18     float:left;
19     width: 300px;
20     overflow:hidden;
21     position:relative;
22 }
23  
24 .col2 {
25     background-color:blue;
26     float:left;
27     width: 400px;
28     overflow:hidden;
29     position:relative;
30  
31 }
32  
33 .col3  {
34     background-color:yellow;
35     float:left;
36     overflow:hidden;
37     width: 300px;
38     position:relative;
39  
40 }
41 </style>
42  
43 </head>
44 <body>
45     <div class="cols">
46         <div class="col1">
47             Департамент градостроительства при текущем ремонте не планирует обустраивать велоструктуру на улицах, которая предусмотрена в ходе капитального ремонта.
48         </div>
49         <div class="col2">Львовские велосипедисты давно ждут постройки велосипедных дорожек в городе. Эти надежды приобрели реальные очертания в 2007-м году, когда Львов попал в число городов-хозяев Чемпионата Европы по футболу 2012-го года. Городские чиновники обещали, что в ходе ремонта улиц, который будет проводиться в рамках подготовки к Чемпионату, сразу оборудуют и велоструктуру.
50         </div>
51         <div class="col3">Привет пользователь!</div>
52     </div>
53 </body>
54 </html>

Читайте также — Разное