28.04.2010, 23:32
|
 |
Аспирант
|
|
Регистрация: 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>
|
|
29.04.2010, 00:45
|
 |
Пионэр
|
|
Регистрация: 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.
…хотя, имхо, это всё, по-хорошему, таблица.
|
|
29.04.2010, 01:02
|
|
Аспирант
|
|
Регистрация: 28.02.2010
Сообщений: 74
|
|
Да таблица-то никуда не денется
Но как-то неспортивно с ее помощью делать, тем более, что это будет меню, внутри которого еще куча элементов |
|
18.05.2010, 12:31
|
 |
Аспирант
|
|
Регистрация: 10.01.2010
Сообщений: 33
|
|
Я так понимаю, вариация на тему колонок одинаковой высоты, посмотрите здесь |
|
18.05.2010, 12:41
|
|
Аспирант
|
|
Регистрация: 28.02.2010
Сообщений: 74
|
|
|
нет, совсем нет
|
|
18.05.2010, 14:37
|
 |
Профессор
|
|
Регистрация: 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>
|
|
|
|
