Mam natępujący kod:
<div id="ie-test">
<ul id="boxLinks" class="group">
<li><a href="#box1">Tab 19</a>
</li>
<li><a href="#box2">Tab 20</a>
</li>
<li><a href="#box3">Tab 21</a>
</li>
</ul>
<div id="box">
<div id="box1" class="box">
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
<div id="box2" class="box">Another box!</div>
<div id="box3" class="box">Woot!</div>
</div>
</div>
CSS:
#ie-test {
position: relative;
width: 100%;
}
.group:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
#box {
border: 1px solid #CCCCCC;
height: 250px;
overflow: hidden;
padding: 0 30px;
position: relative;
top: -1px;
}
#box1:target, #box2:target, #box3:target {
display: block;
}
#boxLinks {
list-style: none outside none;
overflow: hidden;
}
#boxLinks li {
display: inline;
}
#boxLinks li a {
border: 1px solid #CCCCCC;
color: black;
display: block;
float: left;
left: 1px;
margin-left: -1px;
padding: 5px 10px;
position: relative;
text-decoration: none;
}
.box {
display: block;
height: 30px;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
Jak zrobić żeby wysokość boxa zwiększała się propocjonalnie do wielkości tekstu?