Автор Тема: Растянуть Div по высоте второго Diva  (Прочитано 9278 раз)

0 Пользователей и 1 Гость просматривают эту тему.

Оффлайн Nicki

  • Фанат форума
  • Постоялец
  • ***
  • Сообщений: 107
  • +0/-0
  • 0
    • Просмотр профиля
    • http://cprazdnikom.ru
Растянуть Div по высоте второго Diva
« : 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:
Все свойства дивам задаю через классы ...
Поможите?...
Поздравления с днем Святого Валентина

Оффлайн Nicki

  • Фанат форума
  • Постоялец
  • ***
  • Сообщений: 107
  • +0/-0
  • 0
    • Просмотр профиля
    • http://cprazdnikom.ru
Растянуть Div по высоте второго Diva
« Ответ #1 : 03 Сентября 2007, 20:12:34 »
тут я смог залить скриншот проблемы... так нагляднее будет...

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

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

Оффлайн hanslinger

  • H2Oer
  • Ветеран
  • *****
  • Сообщений: 1148
  • +0/-0
  • 2
    • Просмотр профиля
    • http://www.orava.ru
Растянуть Div по высоте второго Diva
« Ответ #2 : 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 тут не надо.

Оффлайн Nicki

  • Фанат форума
  • Постоялец
  • ***
  • Сообщений: 107
  • +0/-0
  • 0
    • Просмотр профиля
    • http://cprazdnikom.ru
Растянуть Div по высоте второго Diva
« Ответ #3 : 04 Сентября 2007, 14:57:45 »
hanslinger
нет.... так еще хуже... и никакого наложения нет... не знаю.

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

Оффлайн hanslinger

  • H2Oer
  • Ветеран
  • *****
  • Сообщений: 1148
  • +0/-0
  • 2
    • Просмотр профиля
    • http://www.orava.ru
Растянуть Div по высоте второго Diva
« Ответ #4 : 06 Сентября 2007, 08:39:30 »
#content { height: 500px; border: 1px solid #ff3333; margin-left: 220px; [b]position: relative;[/b] z-index: 2; }

Оффлайн Nicki

  • Фанат форума
  • Постоялец
  • ***
  • Сообщений: 107
  • +0/-0
  • 0
    • Просмотр профиля
    • http://cprazdnikom.ru
Растянуть Div по высоте второго Diva
« Ответ #5 : 06 Сентября 2007, 13:28:01 »
если ставить position: relative то див content ставится точно ПОД лив left а не накрывает его... а высота content может быть и 200px и 2000px... поэтому выставлять фиксированную высоту для дивов не получится.

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


Поздравления с днем Святого Валентина

Оффлайн hanslinger

  • H2Oer
  • Ветеран
  • *****
  • Сообщений: 1148
  • +0/-0
  • 2
    • Просмотр профиля
    • http://www.orava.ru
Растянуть Div по высоте второго Diva
« Ответ #6 : 06 Сентября 2007, 16:26:03 »
Вместо того, чтобы обкладываться библиями, надо было всего лишь внимательно прочитать мой ответ.
И посмотреть на ссылку, которую я дал.
Хозяин — барин.

Оффлайн Nicki

  • Фанат форума
  • Постоялец
  • ***
  • Сообщений: 107
  • +0/-0
  • 0
    • Просмотр профиля
    • http://cprazdnikom.ru
Растянуть Div по высоте второго Diva
« Ответ #7 : 06 Сентября 2007, 17:14:43 »
Да... за сыылку я конечно забыл... и сразу полез прикручивать те стили что ты указал в посте. В общем я ступил. Прошу прощения. Но вот проблема теперь с левым дивом - теперь он не расширяется в высоту до размеров main... Т.е. когда он был relative то сам расширялся когда расширясля вниз сам main, поэтому с ним не было проблем. А теперь когда у него стоит свойство float не хочет...
Поздравления с днем Святого Валентина

Оффлайн hanslinger

  • H2Oer
  • Ветеран
  • *****
  • Сообщений: 1148
  • +0/-0
  • 2
    • Просмотр профиля
    • http://www.orava.ru
Растянуть Div по высоте второго Diva
« Ответ #8 : 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. пригодится.

Оффлайн Nicki

  • Фанат форума
  • Постоялец
  • ***
  • Сообщений: 107
  • +0/-0
  • 0
    • Просмотр профиля
    • http://cprazdnikom.ru
Растянуть Div по высоте второго Diva
« Ответ #9 : 06 Сентября 2007, 17:51:55 »
Дааа... круто... Ты просто волшебник. )))) Но есть маленький косяк. Если можно его устранить то супер. У меня под main (не в нем) выводится 2 строчки текста, и изза них левый div немного вылазиет за пределы дива main, т.е. вниз... ниже границы main. Это лечится?
Поздравления с днем Святого Валентина

Оффлайн hanslinger

  • H2Oer
  • Ветеран
  • *****
  • Сообщений: 1148
  • +0/-0
  • 2
    • Просмотр профиля
    • http://www.orava.ru
Растянуть Div по высоте второго Diva
« Ответ #10 : 06 Сентября 2007, 22:16:13 »
Лечится, но дальше сам.
Изучай CSS.

 

Sitemap 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