Колонки одинаковой высоты}
Очень часто перед html кодером стоит задача сверстать макет, когда колонки должны тянуться по вертикали. Проблем не возникает используя табличную верстку. В блочной верстке приходится искать различные решения.
Возможные решения
- использование фоновой картинки
- margin + padding + overflow
- использование обертывающих блоков
Решение 1 — использование фоновой картинки
Данный метод основан на том, что родительский блок будет иметь высоту, равную высоте более высокой колонки. Для реализации данного метода, необходимо "обернуть" плавающие блоки родительским. Для родительского блока, используя CSS, применить свойство background, предварительно подготовив 1px картинку.(на примере чуть больше)
Html
<div class="left_block">
...текст...
</div>
<div class="content">
...текст...
</div>
<div class="right_block">
...текст...
</div>
</div>
Css
height:100%;
}
.main_page {
width: 650px; /* ширина трех блоков */
background: url(images/bg.jpg) repeat-y; /* фоновая картинка. повторяется по вертикали */
overflow:hidden;
zoom:1;/*Для 6-го IE, задаем hasLayout
}
.left_block {
width: 200px;
float: left;
}
.content {
width: 200px;
float: left;
}
.right_block {
width: 250px;
float: left;
}
2 Способ("резиновое" решение)
В своей практике очень часто приходится использовать "резиновые" макеты. Основная идея использованная в этом приёме очень похожа на идею, описанную выше. Разница заключается льшь в том, что приходится подготавливать картинки больших размеров по горизонтали. В этом приеме, необходимо задать background для родительского блока:
CSS
Если перед html кодером стоит задача заполнить все пространство цветом (фоновым изображением), можно поступить так:
CSS
height:100%;
}
.page {
min-height:100%;
height:auto !important;
height:100%;
background:url(img/bg_page.jpg) center repeat-y ;
}
Для реализации мы использовали хак с кроссбраузерной высотой. Данный способ описан здесь.
Решение 2 — margin + padding + overflow
Данный метод не использует дополнительных блоков, подходит для резиновой верстки, но как и предыдущий не лишен недостатков.Один из которых, непредсказуемая работа с якорями в разных браузерах. Как видите, весь метод заключается в задавании бОльшего нижнего паддинга и такого же отрицательного нижнего маргина, и оборачивании всего этого в контейнер с overflow:hidden.
html
<div class="col1">
</div>
<div class="col2">
</div>
<div class="col3">
</div>
</div><!--end_main_page-->
css
overflow:hidden;
zoom:1;/*Для 6-го IE, задаем hasLayout
}
.col1, .col2, .col3 {
padding-bottom:30000px;
margin-bottom:-30000px;
}
.col1 {
float:left;
width:25%;
background:#CCC;
}
.col2 {
float:left;
width:49%;
background:#0CF;
}
.col3 {
float:left;
width:25%;
background:#6C3;
}
Одним из недостатков данного метода является невозможным использовать нижний бордер для колонок. Но существует небольщое решение этой проблемы.Для этого надо обернуть .main_page еще раз и внешнему блоку указать нижний border.Все очень просто:)
Решение 3 — использование отрицательного margin и border
Что касается данного способа, то он, как и остальные не лишен недостатков. В данном примере нельзя использовать повторяющееся изображение в background для правого блока, так как цвет мы задаем в border. Но, существует решение с jquery, которое позволяет использовать Border Image (изображение в границе блока).
html
<div id="left_block">
</div>
<div id="right_block">
</div>
</div><!--main_page-->
css
width: 560px;
min-height: 500px;
float:left;
background: #FFFFFF;
border-right: 200px solid #9999FF;
}
.right_block{
width: 200px;
float:left;
color: #FFFFFF;
margin-left: -200px;
}
У left_block мы задали margin-right: 200px цвета, который нам нужен, а у right_block задали отрицательный margin, который в сочетании с float:left, позволит нам спозиционировать блоки так как нам нужно.
Решение 4 - использование фоновой картинки
Данный способ использует библиотеку jquery и небольшой скрипт. Данный спобоб очень интересен при реализации плавающих блоков.
javascript
<script type="text/javascript">
(function($) {
$.fn.equalHeight = function() {
var group = this;
$(window).bind('resize', function(){
var tallest = 0;
$(group).height('auto').each(function() {
tallest = Math.max(tallest, $(this).height());
}).height(tallest);
}).trigger('resize');
}
})(jQuery) $(document).ready (
function()
{
$(".block").equalHeight();
}
);
</script>
Класс "block" присваивается всем блокам, которые необходимо выровнить по высоте.Через скрипт определяется максимальная высота и это значение задается всем блокам.
Комментарии:
 Кристина |
05 08 10 |
НАША 