Дивы с меняющейся высотой @ DeForum.ru

Помогите пожалуйста. Задача: есть несколько дивов, стоящих рядом. Два из них могут увеличиваться в высоту в зависимости от динамичного контента. Как сделать, чтобы остальные увеличивались в высоту вместе с ними, т.е. чтобы все дивы были одинаковой высоты.

Бреками я обозначила увеличивающуюся высоту в двух дивах. Сейчас остальные остаются минимальными по высоте, несмотря на height: 100%; а надо, чтобы они меняли высоту, чтобы у всех высота была наибольшая.

Код:

<div>

   <div style="width: 150px; height: 100%; background-color:#FF66CC; float:left; position:relative;"></div>
   <div style="width: 150px; height: 100%; background-color:#660099; float:left; position:relative;">
      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
   </div>
   <div style="width: 150px; height: 100%; background-color:#FF66CC; float:left; position:relative;"></div>
   <div style="width: 150px; height: 100%; background-color:#FF0000; float:left; position:relative;">
      <br /><br /><br /><br /><br /><br /><br /><br />
   </div>
   <div style="width: 150px; height: 100%; background-color:#FF66CC; float:left; position:relative;"></div>

</div>

Никак. Ксс3 еще не рулит. Делайте таблицей и не парьтесь.

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

Спасибо.

Говорят, джава скриптом можно проверить максимальную высоту, но по-моему, это совсем уже извращение.

Лампочка, именно ). Код должен быть максимально прост и функционален. Лишние навороты никому не нужны. Это на какомнить ксс-зен-гарден можно наровачивать штуки и гнуть пальцы. Обычный клиент этого не оценит.

было неоднократно, поиск.
Правда предлагаемые методы имели мало общего со здравым смыслом и целесообразностью. Возможно, таблицами и вправду оптимальнее.

0 Сообщения: 434 Зарегистрирован: 09.07.06

Есть решение, причем очень простое.
Для начала советую задуматься: для каких таких целей дивы надо сделать одинаковыми по высоте?

ichik, что тут думать, оно должно выглядеть как таблица

Фот в принципе прога, которую делаем. http://www.myhealthportal.co.uk/medadmin/new.html. Видишь, кол-во кнопок в меню может меняться и внутренняя таблица тоже может быть какой угодно высоты. А промежуточные "палки" со светло зеленым фоном должны быть той же высоты, как и другие колонки.

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

а сделать два дива с отступами (margin), так чтобы промежутки фоном в отступы попали?

1 Сообщения: 1 Зарегистрирован: 09.07.07

Возможно это поможет: http://www.webmascon.com/topics/coding/43a.asp

Drendt™, ого, почитаю...

My3bIKAHT, я выше писала, почему это проблематично

Лампочка писал(а):

но наш программист очень хочет дивов, хоть сам и не знает, как это сделать.

- юморист...
Дивы (если ваш программист не может без них жить) можно вставить в ячейки таблицы, и использовать теги <col></col>, —

Цитата:

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

Тогда не нужен Javascript.

Лампочка писал(а):

http://www.myhealthportal.co.uk/medadmin/new.html

404

Don Julio писал(а):

в ячейки таблицы, и использовать теги <col></col>…
Тогда не нужен Javascript.

равно как и сами дивы.

0 Сообщения: 434 Зарегистрирован: 09.07.06

Лампочка, ничего не понял пока, если честно.

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

404? Странно... МОжет как-то для других стран ход к сайту фирмы перекрыт. Не знала. Положила скриншот сюда.

[cyber]form писал(а):

финт хвостом сделать

ВОт я темнота, совсем не понимаю

дык у чего с чем из скриншота одинаковая высота должна быть?

karamba, видишь пять колонок? Три из них - просто светло-зеленый фон с бордером, такие "палки" вертикальные, но для них нужны отдельные дивы, или колонки. Одна - левое меню, вторая - таблица справа. Меню и таблица могут меняться по высоте.

По-моему, у меня созрело какое-то решение... Сейчас попробую.

Лампочка писал(а):

По-моему, у меня созрело какое-то решение... Сейчас попробую.

это лучшее, потому что я снова нuхpeнa не понял, что с чем одной высоты должно быть… :lying:

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

если ж ширина фиксированная, то подложить бэкграунд - картинку - и просто распихать дивы без фона, а нижние бордеры сделать отдельно, под всей конструкцией из этого огорода.

в любом случае, сделать можно.

0 Сообщения: 434 Зарегистрирован: 09.07.06

Лампочка,

Лампочка писал(а):

karamba, видишь пять колонок?

Вижу три, честно.

[cyber]form, вот этим я сейчас и занимаюсь. ВРоде все получается. ПРосто интересно даже

элементарно

Код:

.wrap {width: 100%; overflow: hidden;}
.leftcol {float: left; width: 180px; margin-bottom: -9999px; padding-bottom: 9999px; background: #ff0;}
.centercol {float: left; width: 500px; margin-bottom: -9999px; padding-bottom: 9999px; background: #ffa800;}
.rightcol {float: left; width: 180px; margin-bottom: -9999px; padding-bottom: 9999px; background: #f00;}

<div class="wrap">
    <div class="leftcol">   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />   </div>
    <div class="centercol">   <br /><br /><br /><br />    </div>
    <div class="rightcol">   <br />  </div>
</div>

hardy, вот это да! Спасибо огромное.

Цитата:

режу PSD в HTML

сразу видно, действительно режет человек

А я таким извращенным способом все сделала... Задала верхнему диву бэкграунд на всю ширину :insane:

**116** Сообщения: 3664 Зарегистрирован: 12.03.05

Если контент выглядит как таблица, то и верстаться должен как таблица.

Ведь при верстке стоит задача не показать свою не***бенную крутость обращения с дивами, а сверстать логично и ориентируясь на контент.

Говорю так, сама начав верстку именно с дивов. Всему свое место, в соответствии с логикой :beer:

оффтопик:

Е1ena, впендюрил бы тебе... +3, да некуда :laugh:

**116** Сообщения: 3664 Зарегистрирован: 12.03.05

оффтопик:

Don Julio, хм... и мне :laugh:

Е1ena,

hardy, гигантский респект, но когда колонки не жесткого размера, а процентная резина, то тут начинаются глюки

, вот немного подогнал Ваш код для резиновых колонок, кто знает, а вдруг кому пригодится:

Код:

<!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" lang="ru" xml:lang="ru">
<head>
<style type="text/css">
h1 {margin:0;}
body{margin:0;padding:0; color: white;}
#block {width: 100%; overflow: hidden; background: #f00;}
#leftcol,#centercol,#rightcol{float: left;  margin-bottom: -30000px; padding-bottom: 30000px;min-height:10px; color: black;}
#leftcol { background: #ff0;width: 25%;}
#centercol {width: 49.9%; background: #ffa800;}
#rightcol { width: 25%; background: #f00;}
#header,
#footer{clear:both;height:auto!important;height:50px;min-height:50px;background:green}
</style>
<style type="text/opera">
#centercol {width: 50%;}
</style>
</head>
<body>
<div id="header"><h1>head</h1></div>
<div id="block">
    <div id="leftcol">left</div>
    <div id="centercol">center</div>
    <div id="rightcol">right</div>
</div>
<div id="footer">foot</div>
</body>
</html>

оффтопик:

Е1ena писал(а):

Если контент выглядит как таблица, то и верстаться должен как таблица.

да так можно любой макет считать табличным... Таблицы для табличных данных.

**116** Сообщения: 3664 Зарегистрирован: 12.03.05

vashurin писал(а):

Таблицы для табличных данных.

Да. Я говорила о другом?

Лампочка,

vashurin,
да, бывают иногда глюки при резине, но в большинстве случаев работает.
:beer:

Е1ena,
если это ВЫГЛЯДИТ как таблица - это еще не обязательно табличные данные. если это ПО СМЫСЛУ табличные данные - тогда да.

оффтопик:

холивар

karamba,

оффтопик:

да, опять началось...

15 Сообщения: 1219 Зарегистрирован: 02.02.05

hardy, смотри твое решение в Opera 8.5 :beer:

DeДверь
Логин:
Пароль:
	Автологин