Трехколоночный макет на div с одинаковой высотой
И немного рекламы:
Не секрет, что блоки div по умолчанию растягиваются по ширине на 100%, а по высоте только до размера содержимого. Я искал решение этой проблемы, находил различные варианты, но только один из них смог достаточно хорошо справиться с этой задачей.
А задача заключалась в следующем:
- Адекватная работа во всех браузерах.
- Без использования хаков css (хотя без этого не обошлось).
- Без использования javascript.
- Желательно понятный и небольшой код решения (чтобы потом не запутаться что и куда нужно лепить
).
Ниже представляю вам макет из трех колонок. Смотрим код css:
.cols{
width: 1000px;
margin-left: auto;
margin-right:auto;
overflow:hidden;
_zoom:1;/*Для 6-го IE, задаем hasLayout*/
}
.cols .col1,.cols .col2,.cols .col3{
padding-bottom:10000px;
margin-bottom:-10000px;
}
.col1 {
background-color: green;
float:left;
width: 300px;
overflow:hidden;
position:relative;
}
.col2 {
background-color:blue;
float:left;
width: 400px;
overflow:hidden;
position:relative;
}
.col3 {
background-color:yellow;
float:left;
overflow:hidden;
width: 300px;
position:relative;
}
Здесь .cols — контейнер для трех колонок с суммарной шириной этих колонок. А фокус заключается в задании div свойств:
.cols {
overflow:hidden;
}
.всем_остальным {
padding-bottom: 10000px;
margin-bottom: -10000px;
}
Этот код растягивает блоки div до высоты контейнера. В свою очередь высота контейнера задается самой высокой колонкой. HTML-код выглядит следующим образом:
<html>
<head>
<style type="text/css">
.cols{
width: 1000px;
margin-left: auto;
margin-right:auto;
overflow:hidden;
_zoom:1;/*Для 6-го IE, задаем hasLayout, на эту тему есть много постов на хабре*/
}
.cols .col1,.cols .col2,.cols .col3{
padding-bottom:10000px;
margin-bottom:-10000px;
}
.col1 {
background-color: green;
float:left;
width: 300px;
overflow:hidden;
position:relative;
}
.col2 {
background-color:blue;
float:left;
width: 400px;
overflow:hidden;
position:relative;
}
.col3 {
background-color:yellow;
float:left;
overflow:hidden;
width: 300px;
position:relative;
}
</style>
</head>
<body>
<div class="cols">
<div class="col1">
Департамент градостроительства при текущем ремонте не планирует обустраивать велоструктуру на улицах, которая предусмотрена в ходе капитального ремонта.
</div>
<div class="col2">Львовские велосипедисты давно ждут постройки велосипедных дорожек в городе. Эти надежды приобрели реальные очертания в 2007-м году, когда Львов попал в число городов-хозяев Чемпионата Европы по футболу 2012-го года. Городские чиновники обещали, что в ходе ремонта улиц, который будет проводиться в рамках подготовки к Чемпионату, сразу оборудуют и велоструктуру.
</div>
<div class="col3">Привет пользователь!</div>
</div>
</body>
</html>
Удачной вам верстки.
Популярность: 8%
Нет похожих тем
Если у вас возникли вопросы, вы можете оставить их в комментариях
Не думаю, что это самое удачное решение. Во-первых, ты ставишь гигантский отрицательный отступ у элементов, что не совсес корректно, и что очень не любит IE. В данной ситуации проканало, а если верстка будет сложнее, велика вероятность, что в ИЕ все поедет. Во вторых, выравнивание блоков у тебя идет за счет огромоного paddinga, оригинально, конечно, но что, если в каком-то из блоков разница в тексте окажется больше 1000px?
А почему бы не использовать таблицу и 3 ячейки? По-моему, самый лучший выход из ситуации.
Ну и все-таки, если таблица уж никак не катит, убирай в цсс
.cols .col1, .cols .col2, .cols .col3 {
margin-bottom:-10000px;
padding-bottom:10000px;
}
и добавь к .col1, .cols .col2, .cols .col3
{
height: 100%
}
и будет тебе счастье!
ну тут в том и прикол, что сделано с использованием div, а не таблицы. С таблицей как раз все просто. И перед тем как запускаешь в IE достаточно просто помолиться перед открытием и ничего не поедет.
Это ограниченное решение. В случае если вы используете в тексте дивов якоря, то при переходе на любой из них overflow: hidden режет весь див до якоря без возможности отскроллить наверх ((. Уже обжегся на этом приёме, сейчас ищу решения без overflow: hidden.
Если у вас есть более лучшее решение, поделитесь пожалуйста.