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

Игорь Ермаков · 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 8, 2009

А если я сделал целых ТРИ колонки одинаковой высоты, да ещё и с закруглёнными углами, то меня ждёт приз или нет? http://psywalker.ru/Forum/Column_height/main2.html

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

Охренеть круто Тебе бы блог вести или сайт с рецептиками. Ещё сделай углы скруглённые без картинок, вообще круто будет

Огромное спасибо, пойду разбирать что там и как.

В качестве приза psywalker, получает, большое человеческое спасибо.

psywalker · November 8, 2009

Охренеть круто Тебе бы блог вести или сайт с рецептиками. Ещё сделай углы скруглённые без картинок, вообще круто будет
Огромное спасибо, пойду разбирать что там и как.
В качестве приза psywalker, получает, большое человеческое спасибо.

Да нее, это тебе кажется что это ахеренно, а для любого опытного версталы такая чушь покажется ерундой, 10 минут работы))) Так что мне ещё до блога учиться и учиться, воот

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

Ну вот почему изобретать велосипеды так сложно.

psywalker, я твой код ещё не смотрел, хочу сам сделать эти две колонки чёртовы, но нифига не получается, знаю что там всё легко, но просто не могу их так поставить

psywalker · November 8, 2009

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

Ну там как сказать, не то что ерунда прям, но не сложно так скажем, я там всё расписал, думаю если захочешь, то поймёшь 100%

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

Я же говорю ещё не смотрел твой код

Реально самому интересно додуматься как такие фичи делать

psywalker · November 8, 2009

Я же говорю ещё не смотрел твой код
Реально самому интересно додуматься как такие фичи делать

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

Edited November 8, 2009 by psywalker

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

Дааа... век учись дураком помрёшь

Я то думал, что у меня просто мозгов нет, а оказывается я просто вообще некомпетентен.

Почитал теорию. Вот, что слабал: http://portfolio.kg-am.com/Example/two-height/

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

Код:

<!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>Две колонки одинаковой высоты.</title>
<style type="text/css">
*{margin:0;padding:0}
.contaner{background:url(bg.png) repeat-y;
width:1000px;
margin:0 auto;
overflow:hidden}
.left{color:#fff;
width:270px;
padding:15px;
float:left}
.right{width:667px;
padding:15px;
color:#fff;
margin-left:300px}
</style>
</head>
<body>

<div class="left">
Lorem ipsum dolor sit amet, consectolor 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.

Ut wisi enim ad minim olor 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.

Ut wisi enim ad minim etuer 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 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.

Ut wisi enim ad minim volor 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.

Ut wisi enim ad minim eniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.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. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.
</div>

</div>

</body>
</html>

psywalker · November 8, 2009

погоди, это первый заход явно, но у меня вопрос: Где ты в стилях прописал Зелёный цвет для правой колонки, смотрю в код, в упор не вижу)))

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

Тут изображение используется. Это минус данного приёма, ибо если ты выключишь изображения, то вообще ничего не увидишь.

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

psywalker · November 8, 2009

Тут изображение используется. Это минус данного приёма, ибо если ты выключишь изображения, то вообще ничего не увидишь.
Я вот сейчас думаю, как бы без изображений такого добиться.

Так погоди, слушай меня внимательно:

1) Твоя задача сделать Резиновый, Сначала двух, а потом и трёх колоночный макет, БЕЗ изображений, но можно менять цвет фона, можешь даже фон картинками заполнить, бекграундом, но это максимум!

2) Задача решаема, 100%, подумай

mishka · November 8, 2009

Помощь зала

http://matthewjamestaylor.com/blog/equal-h...er-css-no-hacks

psywalker · November 8, 2009

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

mishka · November 8, 2009

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

Edited November 8, 2009 by mishka2

psywalker · November 9, 2009

Кстати Мих, я ща так подумал, и возник вопрос, а вот такой вариант чем плох или хуже других, тем что кода меньше чтоли? :)

http://psywalker.ru/Forum/Column_height/main4.html

mishka · November 9, 2009

я тоже такой пример сюда хотел привести. Но непривел, потому что думал что ТС сам додумается до этого.

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

неповеришь, но один раз нашел такой сайт где этот способ неработал так как его длинна была больше чем 9999px (там величина маргина и паддинга были -9999px и 9999px соответственно)

И у меня такой вопрос - какое максимальное число можна ставить для маргинов-паддингов?

rash · November 9, 2009

я тоже такой пример сюда хотел привести. Но непривел, потому что думал что ТС сам додумается до этого.
Паддинг и маргин нижние лучше в емах задавать. Чтобы тоже увеличивались при увеличении шрифта.
неповеришь, но один раз нашел такой сайт где этот способ неработал так как его длинна была больше чем 9999px (там величина маргина и паддинга были -9999px и 9999px соответственно)
И у меня такой вопрос - какое максимальное число можна ставить для маргинов-паддингов?

У старых сафари было ограничение 32768 пикселей. Уже не актуально, ограничений современных браузеров не знаю.

Этот способ плох тем, что при переходе по странице с помощью якорей в каком-то браузере все начинало ломаться.

Есть более красивый, надежный и универсальный способ, он описан в интернете. :-)

psywalker · November 9, 2009

А я слышал, что 32768пк это максимальная высота canvas, это самый главный блок, на котором держится уже html и т. д., следовательно это максимальная высота, но если честно это не логично, так как токой высоты в принципе не на одном сайте быть не может, поэтому смело можно ставить и 20000 например)))

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

А вообще хотелось бы поглядеть на более универсальный и надёжный способ, может на досуге сам такой сделаю, хотя врадли...Медведь, помогаай

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

Ни одной ссылки ещё не открыл.

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

Либо просто знаний не хватает, либо я кран ржавый.

psywalker · November 9, 2009

Тебе возможно сможет помочь вот эта штука

margin-bottom: -30000px;
padding-bottom: 30030px;

И возможно вот эта:

overflow: hidden;

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

psywalker · November 9, 2009

Да на самом деле не так всё страшно, как кажется, можно ещё вариант кстати.

position: absolute; и position:relative;

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

Чёрт знает, что, вообще %)

Используя эту штуку я вот до чего дошёл:

http://portfolio.kg-am.com/Example/two_height/

В IE не работает, сейчас думаю как исправить.

Но вы мне вот, что объясните.

margin-bottom: -30000px;
padding-bottom: 30030px;

Спасибо, конечно огромное за этот код, сам бы я до такого точно бы не дошёл, но.

В чём вообще прикол этого кода? Да я смог через него растянуть эту колонку, но я не понял как он работает %)

В чём тут принцип действия? Как он работает, как он действует, как его правильно использовать?

gesandte · November 9, 2009

мохно здесь почитать

там другие варианты

psywalker · November 9, 2009

margin-bottom: -30000px;
padding-bottom: 30030px;

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

Для ИЕ попробуй Зуум:1

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

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information