• Страница 1 из 1
  • 1
Форум Studio AD » Сайтостроение » Общий форум по CSS » Див подстраивается под высоту другого дива (срочно)
Див подстраивается под высоту другого дива
WRC
Дата: Среда, 03.03.2010, 14:57 | Сообщение # 1
говорун
Группа: Проверенные
Пользователь №: 223
Сообщений: 149
Получено оценок: 11 		написал шаблон поставил и увидел баг...
мне надо было сделать чтобы дивные контейнеры растягивались под высоту контента...
сделал для этого функцию:
Code

function karkas(b,a,d) { //на d не обращайте внимания
var i=document.getElementById(a);
document.getElementById(b).style.cssText='height: auto !important; height: '+(i.offsetHeight-d)+'px; min-height: '+(i.offsetHeight-d)+'px;';
};
karkas('cont7','cent3',0);
karkas('cont9','cent3',50);

Code

<div id='cont7'>конт первый</div>
<div id='cont9'>конт второй</div>
<div id='cent3'>боди<br>боди<br>боди<br>боди<br>боди<br></div>
<style>
#cont7 {float: left; border:1px solid red;}
#cont9 {float: right; border:1px solid red;}
#cent3 {border:1px solid red;}
</style>

всё бы ок но...
в новостях есть <img> на которых стоит alt=""
и при загрузке страницы картинки естественно с начало имеют высоту 0...
и контейнеры равняются под данный контент, но когда картинки загружаются полность то получается косяк(думаю поняли какой... див с контентом становится больше дивов контейнеров :( )
вопрос: как сделать чтобы высота подстраивалась без перезагрузки страницы? ну типо онлайн... :D
нужно очень срочно иначе придётся забить на див версту(
Устраняем баг при просмотре материала
  
Aleko
Дата: Среда, 03.03.2010, 15:58 | Сообщение # 2
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
Code

<div class='wrapper'>
<div id='cont7'>конт первый</div>
<div id='cont9'>конт второй</div>
<div id='cent3'>боди<br>боди<br>боди<br>боди<br>боди<br></div>
</div>
<style>
#cont7 {float: left; border:1px solid red;}
#cont9 {float: right; border:1px solid red;}
#cent3 {border:1px solid red;}
.wrapper {width:100%;overflow:hidden;}
</style>

Вот и всё. Скрипт не нужен.

Бесплатные обои.
  
WRC
Дата: Среда, 03.03.2010, 16:26 | Сообщение # 3
говорун
Группа: Проверенные
Пользователь №: 223
Сообщений: 149
Получено оценок: 11 		Aleko, не то...
по твоему способу получается это:

а нужно:

я уже это риализовал но как сделать чтоб выравнивание по высоте было онлайн...хз
так что думаю зря перенёс тему(
Прикрепления: 4341954.jpg (11.1 Kb) · 3042283.jpg (5.3 Kb)

Устраняем баг при просмотре материала

Сообщение отредактировал WRC - Среда, 03.03.2010, 16:27
  
Wlodzimierz
Дата: Среда, 03.03.2010, 23:33 | Сообщение # 4
молчун
Группа: Проверенные
Пользователь №: 228
Сообщений: 46
Получено оценок: 4
Code

<div class='wrapper'>
<div id='cont7'>конт первый</div>
<div id='cont9'>конт второй</div>
<div id='cent3'>боди<br>боди<br>боди<br>боди<br>боди<br></div>
</div>
<style>
#cont7 {float: left; border:1px solid red; width:200px;}
#cont9 {float: right; border:1px solid red; width:200px;}  
#cent3 {border:1px solid red; margin-left:200px; margin-right:200px;}
.wrapper {width:100%;overflow:hidden;}
</style>

Должно помочь ;)
Статусы
  
WRC
Дата: Четверг, 04.03.2010, 06:50 | Сообщение # 5
говорун
Группа: Проверенные
Пользователь №: 223
Сообщений: 149
Получено оценок: 11 		Wlodzimierz, не то... вы не поняли суть вопроса...
Устраняем баг при просмотре материала
  
DSC
Дата: Четверг, 04.03.2010, 16:42 | Сообщение # 6
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41 		а не легче сделать просто таблицей?
это я как вариант предложил!
aka Latro
  
WRC
Дата: Четверг, 04.03.2010, 16:46 | Сообщение # 7
говорун
Группа: Проверенные
Пользователь №: 223
Сообщений: 149
Получено оценок: 11 		DSC, легче канешь... даже слишком...
но мне это вообще ещё нужно для элементов имеющих стиль float
Устраняем баг при просмотре материала
  
DSC
Дата: Четверг, 04.03.2010, 16:57 | Сообщение # 8
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41 		ааа, ну щас могу попробывать написать тебе вариант..)
aka Latro
  
DSC
Дата: Четверг, 04.03.2010, 17:39 | Сообщение # 9
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41 		Скрипт:
Code
<script type="text/javascript">function oH(f,s){d=document;setInterval(d.getElementById(f).style.height=d.getElementById(s).offsetHeight+'px',1)}</script>
Вызывать вот так:
Code
oH(фиксированный айди,айди с которого первый айди берёт высоту)
Пример:
Code
oH('id1','id')

aka Latro
  
Aleko
Дата: Четверг, 04.03.2010, 17:39 | Сообщение # 10
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167 		WRC, это можно легко сделать на css если известна высота страницы в пикселях.
Бесплатные обои.
  
WRC
Дата: Пятница, 05.03.2010, 09:11 | Сообщение # 11
говорун
Группа: Проверенные
Пользователь №: 223
Сообщений: 149
Получено оценок: 11
Quote (Aleko)
WRC, это можно легко сделать на css если известна высота страницы в пикселях.

то есть высота странички должна быть постоянна?
мне та нужно чтоб растягивалось...
DSC, пасиб... но этот скрипт практически такой же как в первом посту (...
то есть вот:
http://obucoz.org.ru/g.htm
хотя я уже забил на это и всё же сделал маленькую табличку у себя в каркасе...

пользуясь случаем задам ещё вопрос :D
во всех браузерах кроме ие действует стиль display:table;
можно ли в ie предать диву свойства таблицы?

Устраняем баг при просмотре материала
  
DSC
Дата: Пятница, 05.03.2010, 12:22 | Сообщение # 12
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41 		WRC, не, ну а вникнуть немного не судьба, вот немного рихтанул и твой и мой код:
Code
<style>
#id1 {float: left; border: 1px solid red;}
#id2 {float: right; border: 1px solid red;}
#id3 {border: 1px solid red;}
</style>
<div id='id1'>1</div>
<div id='id2'>2</div>
<div id='id3' align="center">
нажми на меня<br>
нажми на меня<br>
нажми на меня<br>
нажми на меня<br>
нажми на меня<br>
</div>
<script type="text/javascript">
function oH(f,s){setInterval(function(){d=document;t=d.getElementById(s);d.getElementById(f).style.height=t.offsetHeight+'px';t.onclick=function(){t.style.height=t.offsetHeight+10+'px'}},1)}
oH('id1','id3');
oH('id2','id3');
</script>

aka Latro
  
WRC
Дата: Пятница, 05.03.2010, 12:55 | Сообщение # 13
говорун
Группа: Проверенные
Пользователь №: 223
Сообщений: 149
Получено оценок: 11 		DSC, не... онкликом я хотел показать тока изменение высоты контента... а если оставить всё как было раньше и засунуть в <div id='cent3'></div> это:
Code
<div style="background: navy; width: 50px; height: 50px;" onclick="setInterval(style.height=offsetHeight+10+'px',1);"></div>

http://obucoz.org.ru/g.htm
нажимай на синий квадратик... запомни этим я просто показываю свою проблему...
Quote (WRC)
в новостях есть <img> на которых стоит alt=""
и при загрузке страницы картинки естественно с начало имеют высоту 0...
и контейнеры равняются под данный контент, но когда картинки загружаются полность то получается косяк(думаю поняли какой... див с контентом становится больше дивов контейнеров :( )

так же можно туда всунуть
Code
<img alt'' src='ссылка на тяжёлую картинку'>

Устраняем баг при просмотре материала

Сообщение отредактировал WRC - Пятница, 05.03.2010, 13:28
  
DSC
Дата: Пятница, 05.03.2010, 13:35 | Сообщение # 14
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41 		WRC, щас попробую ещё переделать)
переделал:
Code
<style>
#id1,#id2,#id3{border:1px solid red}
#id1{float:left}
#id2{float:right}
</style>
<div id='id1'>1</div>
<div id='id2'>2</div>
<div id='id3' align="center" onmouseover="t=d.getElementById('id3');t.style.height=t.offsetHeight+10+'px'">
нажми на меня<br>
нажми на меня<br>
нажми на меня<br>
нажми на меня<br>
нажми на меня<br>
</div>
<script type="text/javascript">
function oH(f,s){setInterval(function(){d=document;d.getElementById(f).style.height=d.getElementById(s).offsetHeight+'px'},1)}
oH('id1','id3')
oH('id2','id3')
</script>

aka Latro

Сообщение отредактировал DSC - Пятница, 05.03.2010, 13:49
  
WRC
Дата: Воскресенье, 07.03.2010, 04:33 | Сообщение # 15
говорун
Группа: Проверенные
Пользователь №: 223
Сообщений: 149
Получено оценок: 11 		DSC, не всё не то...
кароч... контейнеры сделал таблицей...
для элементов имеющих стиль float помог див со стилем clear: both;
так что всё... у меня вопросов нет...
тему можно закрывать...
Устраняем баг при просмотре материала
  
Форум Studio AD » Сайтостроение » Общий форум по CSS » Див подстраивается под высоту другого дива (срочно)
  • Страница 1 из 1
  • 1
Поиск:
© Studioad.ru 2006 · 2010. Использование материалов форума на сторонних ресурсах без прямой обратной ссылки строго запрещено. Хостинг от uCoz.