Очень часто при верстке макетов необходимо, чтобы колонки имели одинаковую высоту. Это очень легко реализуется при верстке таблицами, но в блочной верстке эту задачу выполнить немного сложнее.

Давайте разберемся, как же добиться такого эффекта. Я приведу несколько способов верстки колонок одинаковой высоты. Каждый из них имеет свои плюсы и минусы. Можете выбрать тот, который больше Вам подходит. Я, например, пользуюсь несколькими из этих способов, в зависимости от того, какой макет верстаю.

Итак, начнем.

Первый способ.

HTML:

<div id="wrapper">
    <!-- Блок1 -->
	<div id="left">
		<p>Contrary to popular belief, Lorem Ipsum is not simply random text. 
		It has roots in a piece of classical  literature from 45 BC, making it over 
		2000 years old. Richard McClintock, a professor at Hampden-Sydney College in 
		Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem 
		Ipsum passage, and going through the cites of the word in classical literature</p>
	</div>
 
    <!-- Блок 2 -->
	<div id="right">
		<p>Contrary to popular belief, Lorem Ipsum is not simply random text.
		 It has roots in a piece of classical Latin literature from 45 BC, making 
		 it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney 
		 College in Virginia, looked up one of the more obscure Latin words, consectetur</p>
	</div>
</div>

CSS:

	#wrapper {
	width:100%;
	overflow: hidden;
}
 
#left {
	width:30%;
	float:left;
	background-color: #999999;
	padding-bottom: 30000px;
	margin-bottom: -30000px;
}
 
#right {
	width:70%;
	float:left;
	background-color: #99CC99;
	padding-bottom: 30000px;
	margin-bottom: -30000px;
}

Мы задаем нижний padding: padding-bottom: 30000px; и такой же отрицательный margin: margin-bottom: −30000px; А обворачивающему их блоку #wrapper назначаем overflow:hidden.

Второй способ.

Данный способ заключается в использовании фоновой картинки для блока-родителя и подходит только для верстки калонок фиксированой ширины.

Создаем картинку по ширине колонок высотой 1px (bg.png).



Присваиваем ее в качестве фона родительскому блоку #wrapper и повторяем по вертикали и получается, что колонки просто накладываются на фон и возникает эффект равных по высоте колонок.

HTML:

<div id=”wrapper”>
	<div class=”left”>Контент</div>
	<div  class=”center”>Контент</div>
	<div class=”right”>Контент</div>
	<div class=”clear”></div>
</div>

CSS:

#wrapper {
	background-image: /bg.png;
	background-repeat: repeat-y;
	width: 900px;
	margin: 0 auto;
 
}
 
.left {
	float: left;
	width: 200px;
}
 
.content {
	float: left;
	width: 400px;
}
 
.right {
	float:left;
	width: 300px;
}
 
.clear {
	clear: both;
}

Третий способ.

Этот способ состоит в использовании свойства display: table-* . Код выглядит следующим образом:
HTML:

<div id="wrapper">
	<div id="container">
		<div id="left"> Первая колонка</div>
		<div id="right"> Вторая колонка</div>
	</div>
</div>

CSS:

#wrapper {
	width:100%;
	display:table-cell;
}
 
#container {
	display:table-row;
}
 
#left {
	width:200px;
	display:table-cell;
	background:red;
}
 
#right {
	width:700px;
	display:table-cell;
	background:blue;
}

Этот метод довольно хорош, но он не работает в IE6/7, так как они не «понимают» свойств table-cell и table-row.

Четвертый способ— использование обертывающих блоков.

Метод заключается в создании блоков-оберток по числу имеющихся колонок.
HTML:

<div class="fon3"> <!-- фон для правой колонки -->
	<div class="fon2"> <!-- фон для центральной колонки -->
		<div class="fon1"> <!-- фон для левой колонки -->
			<div class="leftColumn">Левая колонка</div>
			<div class="centerColumn">Центральная колонка</div>
			<div class="rightColumn">Правая колонка</div>
		</div>
	</div>
</div>

CSS:

.fon1 {  /* фон для левой колонки */
	width: 100%;
	background: #3d2af0;
	float: left; /* делаем все обертки плавающими блоками чтобы избежать добавления блока с clear: both; */
	position: relative; /* чтобы иметь возможность сместить фон */
	right: 30%; /* обнажаем красный фон для центральной колонки. 30% - ширина центральной колонки */
}
.fon2 {/* фон для центральной колонки */
	width: 100%;
	background: #e34456;
	float: left;
	position: relative;
	right: 40%; /* обнажаем желтый фон для правой колонки. 40% - ширина правой колонки */
}
.fon3 {/* фон для правой колонки */
	width: 100%;
	background: #e3e244;
	float: left;
}
.leftColumn {
	width: 30%;
	float: left;
	overflow: hidden; /* страховка от ломки верстки объектами шире размера колонки-родителя */
	position:relative;
	left:70%; /* возвращаем колонки с контентом на свои позиции. 70% - сумма смещений оберток fon1 и fon2 */
}
.centerColumn {
	width: 30%;
	float: left;
	overflow: hidden;
	position:relative;
	left:70%;
}
.rightColumn {
	width: 39%;
	float: left;
	overflow: hidden;
	position:relative;
	left:70%;
}

Данный метод хорош тем, что он кроссбраузерен, не использует картинок, применим к резиновой верстке.

Пятый способ.

Еще одно решение проблемы привел в своем блоге Сергей Чикуёнок . Вот код:

HTML:

<div class="col-wrap1">
	<div class="col-wrap2">
		<div class="col1">left column</div>
		<div class="col2">center column</div>
		<div class="clear"></div>
	</div>
</div>

CSS:

.col-wrap1 {
	width:25%;
	background:blue;
}
 
.col-wrap2 {
	width:200%;
	margin-right:-100%; /* чтобы IE6 не раздвигал контейнер */
	position:relative;
	left: 100%;
	background:red;
}
 
.col1 {
	float:left;
	width:50%;
	margin-right:-100%;
	position:relative;
	left:-50%;
}
 
.clear {
	clear:both;
	font-size:0;
	overflow:hidden;
}

Можно создать и больше растягивающихся колонок одинаковой высоты. Каждой из колонок можно задать свой бордер. В общем, очень гибкий способ.

Добавлено: 15 Августа 2013 12:45:34 Добавил: Андрей Ковальчук Нравится 0

Добавить