Высота DIV-а должна быть равна высоте справа расположенного большего DIV-а

andreyua · March 23, 2012

Код:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title>test</title>
<style type="text/css">
        html { height: 100%; margin: 0; padding: 0; /*background: #fa0;*/ }
        body { height: 100%; margin: 0; padding: 0; background: #ccc; padding: 0 15px }        
</style>
</head>
<div style="border: 1px solid #990099;">
	<div style="height:100%;width:50%;float:left;">
		<div style="height:100%;border: 1px solid #3187BD;">
			 БЛОК А
		</div>
	</div>
	<div style="height:100%;width:50%;float:right;">
		<div style="height:100%; border: 1px solid #3187BD;">
			 БЛОК Б
			<ul>
				<li>Тексты, Тексты, Тексты, Тексты, Тексты, Тексты, Тексты</li>
				<li>Тексты, Тексты, Тексты, Тексты, Тексты, Тексты, Тексты</li>
				<li>Тексты, Тексты, Тексты, Тексты, Тексты, Тексты, Тексты</li>
				<li>Тексты, Тексты, Тексты, Тексты, Тексты, Тексты, Тексты</li>
			</ul>
		</div>
	</div>
	<div style="clear:both">
	</div>
</div>
</html>

Что нужно сделать, чтобы высота "БЛОКА А" равнялась высоте "БЛОКА Б" ?

alexandr_v-vich · March 23, 2012

Задать самому первому div фиксированную высоту

andreyua · March 23, 2012

Не могу , в том то и дело. Количество строк текста динамически изменяется ...

Switch74 · March 23, 2012

забыл body, если это не критично, то можно сделать левый блок


position:absolute;
top:0px;
bottom:0px;

и не забыть для родителя указать


position:relative;

alexandr_v-vich · March 23, 2012

А ещё можно забить на это

Точнее, принять первый самый див, что это и есть первый блок, а второй блок, какбы внутри него и обтекает всё его содержимое. Т.е. всё как у вас и есть, только, если хотите работать с первым блоком - работайте с первым div. А для второго - свои стили.

..Вроде нормально высказался...

Edited March 23, 2012 by alexandr_v-vich

Switch74 · March 23, 2012

не пойму как обтекание даст возможность блоку тянуться на всю высоту :unsure:

alexandr_v-vich · March 23, 2012

так и думал))))

Этот див (самый первый) будет тянутся, потому что ему поставим height: auto;. По сути это и будет Блок1, а точнее - его содержимое и будет содержимое этого дива + Блок2, которому ставим height: 100%; Таким образом они не будут перемешиваться и всё хорошо

Вот, в общем, о чём я.

....Правда, что-то не работает (при насыщении), ну это так, идея.

Edited March 23, 2012 by alexandr_v-vich

dostel1 · March 23, 2012

можно через скрипт c помощью с-ва offsetHeight

andreyua · March 23, 2012

Спасибо всем.

Дело в том, что это не макет страницы, а некий блок с данными спрятанный где то далеко внутри страницы . И "height: 100%;" для body, html я навел лишь в качестве примера, я так понял он роли все равно не сыграет.

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

можно через скрипт c помощью с-ва offsetHeight

Не хотелось бы через JS.

Неужели я попал ?

Через таблицы делать ?

Sign In

Высота DIV-а должна быть равна высоте справа расположенного большего DIV-а

Question

andreyua

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

alexandr_v-vich

Link to comment

Share on other sites

andreyua

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

alexandr_v-vich

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

alexandr_v-vich

Link to comment

Share on other sites

dostel1

Link to comment

Share on other sites

andreyua

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information