damezumari a écrit :
I have three div blocks defined like this:
#left1
{
float: left;
background-color: white;
width: 184px;
margin-right: 4px;
text-align: left;
}
#left2
{
float: left;
background: url(images/barrav.gif) repeat;
width: 23px;
}
#left3
{
float: left;
background-color: white;
width: 573px;
margin-left: 4px;
}
The idea is to have the blocks displayed side by side. I do not know
the height of left1 and left3, but I want the image in left2 to be
repeated for the max height of left1 and left3. If I set the height in
left2 it will either be too short or too long.
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
function maxHeightDivs(divs) {
divs = divs.split(',');
var H = 0, ok=false;
for(var i=0; i<divs.length; i++)
if($(divs[i]) &&
$(divs[i]).offsetHeight &&
$(divs[i]).offsetHeight>H ) {
H = $(divs[i]).offsetHeight;
ok = true;
}
if(ok) {
for(var i=0; i<divs.length; i++) $(divs[i]).style.height = H+'px';
}
else alert('this script is out :-(');
}
window.onload = function() {
maxHeightDivs('left1,left2,left3');
}
</script>
Variante :
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
function maxHeightDivs() {
var H = 0, ok=false;
for(var i=0; i<arguments.length; i++)
if($(arguments[i]) &&
$(arguments[i]).offsetHeight &&
$(arguments[i]).offsetHeight>H ) {
H = $(arguments[i]).offsetHeight;
ok = true;
}
if(ok) {
for(var i=0; i<arguments.length; i++)
$(arguments[i]).style.height = H+'px';
}
else alert('this script is out :-(');
}
window.onload = function() {
maxHeightDivs('left1', 'left2', 'left3');
}
</script>
not tested with IE
--
sm
