Меню
Что нового?

Как растянуть div по высоте второго?

Nicki

Новичок
Как растянуть div по высоте второго?

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

<div name=main class=main>
Тут табличка на всю ширину с главным меню и т.д.

<div name=leftPanel class=leftPanel>Тут табличка с контекстным меню</div>
<div name=content class=content>Тут табличка с контентом страницы</div>
</div>

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

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

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

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

Zetruger

ivan.chistyakov.name
заливай на "g free image hosting"

а зачем ты так хочешь раздвигать main?

-~{}~ 04.09.07 11:27:

единственный нормальный способ строить страницу на основе div-ов это оперирование float/clear свойствами

так как это сделано на w3.org
 

Nicki

Новичок
вот залил скрин сюда http://foto.mail.ru/inbox/nickicool/2/3.html

На картинке.
- Зеленая часть это див leftPanel
- див main это темно зеленая рамка по краям окна броузера.
- а вот див content как видно вылазиет далеко вниз за пределы дива main НЕ раздвигая его ВНИЗ.

Проблема не в leftPanel, а в content т.к. он выезжает ЗА пределы дива main, а НЕ раздвигает его. Как это вылечить? Плиз помогите если можете.

-~{}~ 04.09.07 14:57:

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

Zetruger

ivan.chistyakov.name
<div class=main>

<div class=content> ... </div>

<hr class=hide>

</div>


.hide {
visibility: hidden;
background: #fff;
color: #fff;
clear: both;
margin: 0;
}


еще раз говорю прочитай про свойства float и clear
и эксперементируй с ними
 

Nicki

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

<script type="text/javascript">
function resizeDiv()
{
var height = document.body.scrollHeight
document.getElementById("main").style.height = height;
}
</script>
<body onLoad="resizeDiv()">

УРА!
 

Qwerty

Новичок
Имхо, это неправильно. Пусть работает, но извращенно...
DOCTYPE у страницы прописан? Правильно прописан?
Спрашиваю потому, что значения всех атрибутов в приведенном коде - без кавычек, наводит на мысли...

-~{}~ 06.09.07 06:57:

Ага, ну конечно, DOCTYPE-а нет... Требовать соответствия каким-то стандартам бессмыслено. Рекомендую прописать, может случиться много интересного ;).
 

Zetruger

ivan.chistyakov.name
Nicki
ты бы хоть в пайнте нарисовал как должен выглядеть твой сайт
одну и туже картинку можно добиться множеством способов
 

Nicki

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

Qwerty
Работает извращенно, но работает и показывает страницу как надо. Ну и самое главное - никто так и не осмелился помочь с этим и предложить что то конкретное (кроме Zetruger) ... не думаю что у кого другого получилось бы тоже самое без javascript, имхо, может я чего еще и не знаю о дивах, но одно вроде понял точно - див с абсолют не сможет раздвинуть див с релатив в который он вложен. Ну и строка с доктайпом врят ли поможет в этой ситуации (мое скромное мнение). Но я конечно попробую и пропишу ее, спасибо за совет!

И еще. Я в общем никогда не использовал кавычек в атрибутах и никогда не было проблем (ну кроме как в alt, value, и тому подобным). Какие проблемы могут быть?
 
Войдите или зарегистрируйтесь для ответа.
Сверху