Forum Webscript.Ru

Программирование => JavaScript & JScript => Тема начата: Nicki от 03 Сентября 2007, 16:34:28

Название: Растянуть Div по высоте второго Diva
Отправлено: Nicki от 03 Сентября 2007, 16:34:28

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

    Тут табличка на всю ширину с главным меню и т.д.

   

Тут табличка с контекстным меню

   

Тут табличка с контентом страницы

Ситуация такая.
- Див Main имеет ширину 100%
- Див leftPanel имеет ширину 250px, а в высоту должен равняться высоте дива Main.
- Див content должен частично накрывать сверху див leftPanel и растягиваться в ширину на оставшиеся 100% (для этого я указал в css width: (100%-200px); left:200px; ).

Проблема в том, что див content заполняясь данными растягивается вниз (что и нужно), но не растягивает при этом див Main и leftPanel соответственно они остаются прежними размерами. При этом, див с контентом может вылезать очень сильно за пределы главного дива. Ставить overflow не получится потому что нужно показать все данные без прокрутки...

Я думаю, что тут только javascriptом можно починить это... но я не знаю этого языка. Т.е. я понимаю что мне нужно
- получить объект content
- получить свойство высота этого объекта
- задать новую высоту объектам main leftPanel.

а как это записать на javascript  ...... не знаю. :confused:
Все свойства дивам задаю через классы ...
Поможите?...

Название: Растянуть Div по высоте второго Diva
Отправлено: Nicki от 03 Сентября 2007, 20:12:34

тут я смог залить скриншот проблемы... так нагляднее будет...

http://forums.webscript.ru/showthread.php?s=&threadid=26123

это самый низ страницы, как раз проблемная часть.
(дизайн еще  не ставили... просто наброски)

Название: Растянуть Div по высоте второго Diva
Отправлено: hanslinger от 04 Сентября 2007, 13:37:38

Код: [Выделить]

#main { border: 1px solid #226600; }
#left { float: left; width: 250px; background: #88cc99; height: 100px; //margin-right: -30px; }
#content { height: 500px; border: 1px solid #ff3333; margin-left: 220px; position: relative; z-index: 2; }
http://orava.ru/misc/divs.html
Никакого JS тут не надо.

Название: Растянуть Div по высоте второго Diva
Отправлено: Nicki от 04 Сентября 2007, 14:57:45

hanslinger
нет.... так еще хуже... и никакого наложения нет... не знаю.

Вот тут http://letter.h12.ru/123.htm я выложил страницу так как она получается ... чтоб если что вы могли и код посмотреть. Видите, список результатов вылазиет за пределы дива main?

Название: Растянуть Div по высоте второго Diva
Отправлено: hanslinger от 06 Сентября 2007, 08:39:30

Код: [Выделить]

#content { height: 500px; border: 1px solid #ff3333; margin-left: 220px; [b]position: relative;[/b] z-index: 2; }

Название: Растянуть Div по высоте второго Diva
Отправлено: Nicki от 06 Сентября 2007, 13:28:01

если ставить position: relative то див content ставится точно ПОД лив left а не накрывает его... а высота content может быть и 200px и 2000px... поэтому выставлять фиксированную высоту для дивов не получится.

В общем пришлось мне обложиться библиями по javascript и через два дня я родил таки код вроде работающей в осле и опере) Да, это как бы "криво", но работат... и к тому же никто мне ничего лучшего предложить не смог...

Название: Растянуть Div по высоте второго Diva
Отправлено: hanslinger от 06 Сентября 2007, 16:26:03

Вместо того, чтобы обкладываться библиями, надо было всего лишь внимательно прочитать мой ответ.
И посмотреть на ссылку, которую я дал.
Хозяин — барин.

Название: Растянуть Div по высоте второго Diva
Отправлено: Nicki от 06 Сентября 2007, 17:14:43

Да... за сыылку я конечно забыл... и сразу полез прикручивать те стили что ты указал в посте. В общем я ступил. Прошу прощения. Но вот проблема теперь с левым дивом - теперь он не расширяется в высоту до размеров main... Т.е. когда он был relative то сам расширялся когда расширясля вниз сам main, поэтому с ним не было проблем. А теперь когда у него стоит свойство float не хочет...

Название: Растянуть Div по высоте второго Diva
Отправлено: hanslinger от 06 Сентября 2007, 17:34:03

Тогда так:

Код: [Выделить]


#main { border: 1px solid #226600; position: relative; //height: 1px; }
#left { position: absolute; width: 250px; background: #88cc99; height: 100%; //margin-right: -30px; left: 0; }
#content { height: 500px; border: 1px solid #ff3333; margin-left: 220px; position: relative; z-index: 2; }

займись CSS. пригодится.

Название: Растянуть Div по высоте второго Diva
Отправлено: Nicki от 06 Сентября 2007, 17:51:55

Дааа... круто... Ты просто волшебник. )))) Но есть маленький косяк. Если можно его устранить то супер. У меня под main (не в нем) выводится 2 строчки текста, и изза них левый div немного вылазиет за пределы дива main, т.е. вниз... ниже границы main. Это лечится?

Название: Растянуть Div по высоте второго Diva
Отправлено: hanslinger от 06 Сентября 2007, 22:16:13

Лечится, но дальше сам.
Изучай CSS.