Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.04.2010, 23:32
Аватар для why.not?
Аспирант
Отправить личное сообщение для why.not? Посмотреть профиль Найти все сообщения от why.not?
 
Регистрация: 28.02.2010
Сообщений: 74

Высота элемента в зависимости от высоты рядом стоящего
В принципе, могу сказать, что верстаю довольно давно, собаку, может, еще не съел, но, кажется, немного разбираюсь. Но вот сейчас возникла трабла, которую никак не могу осилить и взываю к помощи коллективного разума:
Есть элемент-родитель (#wrapper), известна его ширина и min-height (задача пока не требует хаков под ИЕ и старые ФФ).
Внутри лежат два элемента - #col1 и #col2, ширина их известна. Внутри второго есть еще 5 элементов, равных по высоте и занимающих весь #col2 по высоте. По высоте #col1 резиновый и тянет #wrapper.
Суть задачи такова: чтобы при любом количестве контента в #col1, #col2 занимал точно такую же высоту и вложенные эл-ты заполняли весь #col2
Может быть, чуть понятнее будет на картинке (все марджины и паддинги для красоты, в реальной задаче их нету).
Есть у кого-нибудь мысли, как это реализовать без js?
Колдовство с display ни к чему толковому не привело.

Код, в приципе, не очень важен, структуру можно и поменять.
<div class="wrapper">
		<div id="col1"></div>
		<div id="col2">
			<div id="in1"></div>
			<div id="in2"></div>
			<div id="in3"></div>
			<div id="in4"></div>
			<div id="in5"></div>
		</div>
	</div>
Ответить с цитированием
  #2 (permalink)  
Старый 29.04.2010, 00:45
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

Интересная задачка.

Могу предложить только следующее:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<style type="text/css">
			.wrapper {
				min-height: 100px;
				position: relative;
				border: solid black 1px;
			}
			#col1 {
				width: 80%;
			}
			#col2 {
				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;
				width: 20%;
				background: green;
			}
			#xwrap {
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
			}
			#in1, #in2, #in3, #in4, #in5 {
				position: absolute;
				width: 100%;
			}
			#in1 {top:  0%; bottom: 80%; background: #E79999}
			#in2 {top: 20%; bottom: 60%; background: #DDDD90}
			#in3 {top: 40%; bottom: 40%; background: #99E799}
			#in4 {top: 60%; bottom: 20%; background: #9999E7}
			#in5 {top: 80%; bottom:  0%; background: #DC90DE}
		</style>
	</head>
	<body>
		<div class="wrapper"> 
	        <div id="col1">ETAOIN SHRDLU<br />ETAOIN SHRDLU<br />ETAOIN SHRDLU<br />ETAOIN SHRDLU<br />ETAOIN SHRDLU<br />ETAOIN SHRDLU<br />ETAOIN SHRDLU<br />ETAOIN SHRDLU<br />ETAOIN SHRDLU<br />ETAOIN SHRDLU<br />ETAOIN SHRDLU<br />ETAOIN SHRDLU<br />ETAOIN SHRDLU<br /></div> 
	        <div id="col2">
				<div class="xwrap">
					<div id="in1">1</div> 
					<div id="in2">2</div> 
					<div id="in3">3</div> 
					<div id="in4">4</div> 
					<div id="in5">5</div> 
				</div>
	        </div> 
	    </div>
	</body>
</html>

Если вкратце, задавать 100% от auto мы как не могли так и не можем. Но зато у нас есть в кармане блочная модель и top с bottom. Задаем .wrapper position: relative и позиционируем от него абслютно #col2. Количество текста в правой колонке, увы, влиять на высоту враппера уже не сможет.

Далее, вставляем .xwrap высотой 100%. Без него Опера отказывается делать последующие действия (да и, кстати, права, процент от auto — всегда ноль, если мне не изменяет склероз).

Ну, а дальше, уже от .xwrap, позиционируем пять блоков через top и bottom, чтобы не было швов из-за округления в меньшую сторону.

Работает в Op10.52, Fx3.5.

…хотя, имхо, это всё, по-хорошему, таблица.
Ответить с цитированием
  #3 (permalink)  
Старый 29.04.2010, 01:02
Аватар для why.not?
Аспирант
Отправить личное сообщение для why.not? Посмотреть профиль Найти все сообщения от why.not?
 
Регистрация: 28.02.2010
Сообщений: 74

Да таблица-то никуда не денется
Но как-то неспортивно с ее помощью делать, тем более, что это будет меню, внутри которого еще куча элементов
Ответить с цитированием
  #4 (permalink)  
Старый 18.05.2010, 12:31
Аватар для Cuprum
Аспирант
Отправить личное сообщение для Cuprum Посмотреть профиль Найти все сообщения от Cuprum
 
Регистрация: 10.01.2010
Сообщений: 33

Я так понимаю, вариация на тему колонок одинаковой высоты, посмотрите здесь
Ответить с цитированием
  #5 (permalink)  
Старый 18.05.2010, 12:41
Аватар для why.not?
Аспирант
Отправить личное сообщение для why.not? Посмотреть профиль Найти все сообщения от why.not?
 
Регистрация: 28.02.2010
Сообщений: 74

нет, совсем нет
Ответить с цитированием
  #6 (permalink)  
Старый 18.05.2010, 14:37
Аватар для e1f
e1f e1f вне форума
Профессор
Отправить личное сообщение для e1f Посмотреть профиль Найти все сообщения от e1f
 
Регистрация: 03.04.2009
Сообщений: 1,263

why.not?, да ладно. Вроде бы, именно оно:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

	
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Two liquid columns example</title>
		<style type="text/css">
			.col-wrap1 {
				width:25%;
				background:url(bg1.png) #fabcbc bottom right no-repeat;
				border:10px solid #ee4d4d;
				position:relative;
				left:7%;
			}
			
			.col-wrap2 {
				width:200%;
				position:relative;
				left: 100%;
				margin:-10px -200% -10px 50px;
				background:url(bg2.png) #d9edfc bottom left no-repeat;
				border:10px solid #53c4ff;
			}
			
			.col1 {
				float:left;
				width:50%;
				margin-right:-100%;
				position:relative;
				left:-50%;
				margin-left:-60px;
			}

            .col2-part {
                width: 100%;
                height: 20%;
                position: absolute;
                text-align: center;
                outline: 1px dotted black;
            }

            .col2-part-1 {
                top: 0;
            }

            .col2-part-2 {
                top: 20%;
            }

            .col2-part-3 {
                top: 40%;
            }

            .col2-part-4 {
                top: 60%;
            }

            .col2-part-5 {
                top: 80%;
            }
			
			.col-wrap1, .col-wrap2, .col2-part {
				-moz-border-radius:20px;
				-webkit-border-radius:20px;
			}
			
			.content {
				padding:20px;
			}
			
			p {
				margin-top:0;
			}
			
			.clear {
				clear:both;
				font-size:0;
				overflow:hidden;
			}
		</style>
	</head><body>
		<div class="col-wrap1">
			<div class="col-wrap2">
				<div class="col1">
					<div class="content" id="c1">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
 adipiscing nibh non purus suscipit venenatis. Maecenas egestas, neque a
 iaculis tristique, purus eros laoreet ligula, id venenatis erat purus 
vitae justo. Sed ac pellentesque magna. Cras faucibus metus vel velit 
gravida blandit. Etiam aliquet ligula non enim sagittis vehicula. Donec 
fringilla, erat et semper eleifend, justo quam sodales tellus, a 
vehicula ipsum libero eget mi. Integer condimentum, nibh aliquet 
adipiscing scelerisque, nisl magna accumsan arcu, nec vehicula magna 
mauris interdum elit. Lorem ipsum dolor sit amet, consectetur adipiscing
 elit. Praesent volutpat dapibus lorem.</p>
						<input value="Add text" onclick="addText('c1')" type="button">
					</div>
				</div>
				<div class="col2">
                    <div class="col2-part col2-part-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
 adipiscing nibh non purus suscipit venenatis. Maecenas egestas, neque a
 iaculis tristique, purus eros laoreet ligula, id venenatis erat purus</div>
                    <div class="col2-part col2-part-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
 adipiscing nibh non purus suscipit venenatis. Maecenas egestas, neque a
 iaculis tristique, purus eros laoreet ligula, id venenatis erat purus</div>
                    <div class="col2-part col2-part-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
 adipiscing nibh non purus suscipit venenatis. Maecenas egestas, neque a
 iaculis tristique, purus eros laoreet ligula, id venenatis erat purus</div>
                    <div class="col2-part col2-part-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
 adipiscing nibh non purus suscipit venenatis. Maecenas egestas, neque a
 iaculis tristique, purus eros laoreet ligula, id venenatis erat purus</div>
                    <div class="col2-part col2-part-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
 adipiscing nibh non purus suscipit venenatis. Maecenas egestas, neque a
 iaculis tristique, purus eros laoreet ligula, id venenatis erat purus</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<script type="text/javascript">
			function addText(id) {
				var container = document.getElementById(id);
				var para = container.getElementsByTagName('p')[0];
				container.insertBefore(para.cloneNode(true), container.firstChild);
			}
		</script>
	</body></html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Установить высоту таблици в зависимости от высоты окна браузера Fe_DoS Events/DOM/Window 9 25.01.2010 22:40