Подписка
Email
Fb
RSS
Twitter
Email

Колонки одинаковой высоты

колонки одинаковой высоты

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

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

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

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

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#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:

1
2
3
4
5
6
<div id=”wrapper”>
	<div class=”left”>Контент</div>
	<div  class=”center”>Контент</div>
	<div class=”right”>Контент</div>
	<div class=”clear”></div>
</div>

CSS:

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
#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:

1
2
3
4
5
6
<div id="wrapper">
	<div id="container">
		<div id="left"> Первая колонка</div>
		<div id="right"> Вторая колонка</div>
	</div>
</div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#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:

1
2
3
4
5
6
7
8
9
 <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:

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
.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%;
}

Автор данного метода- Matthew Taylor . Оригинал статьи можно посмотреть здесь. Данный метод хорош тем, что он кроссбраузерен, не использует картинок, применим к резиновой верстке.

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

HTML:

1
2
3
4
5
6
7
<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:

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
.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 комментариев к записи “Колонки одинаковой высоты”

  1. Александр:

    здравстуйте уважаемый denweb!Читаю ваши статьи, очень здорово!Все кратко и содержательно!Но с навигацией между разделами не очень понятно, может тоько у меня такая проблема не знаю, но закончив с разделом «Основные понятия» по порядку перехожу в «Колонки одинаковой высоты», как то немного путанно помоему.Или допустим я хочу освоить весь курс с начала: для этого мне надо выбрать самую последнею главу ,  и от туда уже по возрастающей...

  2. Александр:

    2 глава после основных понятий — верстка ?

    • Александр, вот ссылка http://denweb.ru/category/put-veb-mastera

      Здесь все по порядку, начиная с последней страницы и так далее — по убывающей. Т.е. следующим будет курс html, далее css...
      Скоро сделаю отдельную страницу с содержанием всего курса, чтобы было удобнее. 

  3. Александр:

    спасибо именно про это я и говорил )

  4. Fati:

    Дэн, в вышеприведённом «Втором способе»:там в блоке HTML есть строка:

    <div  class=”center”>Контент</div>    а в блоке  CSS класса   ”center” почуму-то нет. Почему?
                                       

    • Потому-что никаких свойств ему не задано. По ширине автоматически занимает все свободное пространство между left и right.

  5. Fati:

    Дэн, и также мне не понятно во втором способе, почему, если у меня в Html отсутствует div с классом «clear», а в CSS нет — соответственно — атрибута с классом «clear», то картинка у меня исчезает.                              А когда я вношу эти записи, то картинка появляется. Какое значение имеют эти две последние записи?                                                Дэн, я отсылала этот вопрос вам по почте. Но, может быть, так будет понятнее.      Спасибо большое

  6. Fati:

    а в третьем способе , независимо от назначаемого для width значения, все колонки делятся на равные части. По крайней мере,мне никак не удаётся сделать их разными, хотя я назначаю разное значение для каждого width.Что-то странное в этом способе.

  7. Fati:

    Ден, пятый способ, несомненно, требует комментариев, потому что цвет колонок резинится при сокращении окна броузера, а текст из них выдвигается наружу.Разговаривать с автором не решаюсь — там такие серьёзные разговоры, что я просто ничего не понимаю.Если бы кто-ниб. разъяснил этот способ популярно. ))...на видео, напримерспасибо за уроки, Ден.

  8. Добрый день. Выбрал первый способ и столкнулся с проблемой. Если делать ссылки на якоря внутри статьи (оглавлени), то при переходе по такой ссылке обрезается текст до якоря, точнее закрывается дивом, который выше (шапкой в моем случае). Не могу понять почему. Убираю из css  

    padding-bottom: 30000px;
    margin-bottom: -30000px;
    И все нрмально

  9. oleg:

    Доброго дня Denweb! .ну вот сверстали мы сайт  с помошью  html и  css добавили кучу страниц всё классно а дальше что? что с ним делать ? в смысле того как он будет работать? на каком движке ? на wordpresse он врятли работать будет,.Дай чёткое руководство что делать дальше

Оставить комментарий

Spam Protection by WP-SpamFree

Яндекс.Метрика