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

Игорь Ермаков · November 8, 2009

Хочу вас озадачить, друзья.

Дано: 2 колонки с текстом (фиксированные или нет не важно)

У каждой есть фон ну и прочие примочки.

Нужно: создать эффект того, что эти колонки всегда одинаковы по высоте не зависимо от того сколько контента в каждой.

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

Как-то давно попадалась эта задачка, сам её решил, но в упор не помню как.

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

Вот до чего дотопал:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>
<style>
*{margin:0;padding:0}

.contaner{background:url(img/main-bg.png) repeat-y;
width:500px;position:relative;
margin:0 auto}

.left{width:250px;
position:absolute;left:0px}

.right{width:250px;
margin-left:250px}
</style>
</head>
<body>

<div class="contaner">

<div class="left">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
</div>

<div class="right">
Lorem ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
</div>

</div>

</body>
</html>

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

Edited November 8, 2009 by Игорь Ермаков

psywalker · November 10, 2009

Нет, нет, нет, так дело не пойдёт, этот подход в корне не верный.

Во первых вот это убери, вообще оно тут не причём, это уже вчерашний день)))

margin-bottom:-30000px;

padding-bottom:30030px;

Во вторых даю подсказку: В деле принимают участие: Абсолют, релатив и флоат

Игорь Ермаков · November 10, 2009

Нет, нет, нет, так дело не пойдёт, этот подход в корне не верный.
Во первых вот это убери, вообще оно тут не причём, это уже вчерашний день)))
margin-bottom:-30000px;
padding-bottom:30030px;
Во вторых даю подсказку: В деле принимают участие: Абсолют, релатив и флоат

Да-да я от этого отталкиваюсь, вот только пока ничего не придумывается

psywalker · November 10, 2009

Да-да я от этого отталкиваюсь, вот только пока ничего не придумывается

ну так нас никто не торопит, правда ведь

Игорь Ермаков · November 11, 2009

Я не знал, про то, что абсолютно позиционированный блок растягивается если обнулить противоположные свойства.

В отчаянии, я пошёл читать всё подряд и случилось чудо, я наткнулся на статью: http://softwaremaniacs.org/blog/2005/08/03...ut-positioning/

Теперь я сверстал эти 2 блока одинаковой высоты: http://portfolio.kg-am.com/Example/two_height_v5/

В IE6 не пашет в IE7 баги, да и вообще по заданию 3 колонки, но самое главное я сдвинулся с мёртвой точки, пойду усовершенствую это решение

psywalker · November 12, 2009

Отличненько, направление выбрал верное

Sign In

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

Question

Игорь Ермаков

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

55 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Игорь Ермаков

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Игорь Ермаков

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information