<!doctype html>
<html>
<head>
<title>div height test work</title>
<script>
window.onload=changeSize; // "changeSize est juste un titre que tu choisis toi meme et que tu reprends pour function ci-apres//
function changeSize( ){
document.getElementById('droite').style.height=document.getElementById('section').offsetHeight + "px";
document.getElementById('gauche').style.height=document.getElementById('section').offsetHeight + "px";
var obj0=document.getElementById('droite');
var obj2=document.getElementById('block1');
var obj3=document.getElementById('block2');
var obj4=document.getElementById('block3');
var obj5=document.getElementById('block4');
var blockaajuster=obj0.clientHeight-obj2.clientHeight-obj3.clientHeight-obj4.clientHeight-obj5.clientHeight; //ici si tu as des margins entre tes div, tu dois soustraire la somme total apres l'obj5
document.getElementById('mon-dernier-block').style.height=blockaajuster+"px";
}
</script>
<style>
#gauche, #section, #block1, #block2, #block3, #block4, #mon-dernier-block
{
box-shadow: 0px 0px 10px #000000;
}
body
{
width:950px;
margin:0px auto;
BACKGROUND:#f3f3f3;
}
#gauche
{
width:200px;
background:FUCHSIA;
margin: 0px;
color:white;
float:left;
height:;
}
#section{
width:490px;
background:orange;
margin-left:30px;
color:white;
float:left;
height:2000px;
}
#droite{
width:200px;
background:#fff;
color:red;
float:right;
margin-left:30px;
}
#block1
{
background:green;
height:150px;
}
#block2
{
background:yellow;
height:320px;
}
#block3
{
background:pink;
height:320px;
}
#block4
{
background:orange;
height:320px;
}
#mon-dernier-block
{
background:red;
color:white;
}
</style>
</head>
<body>
<aside id="gauche">
<p> ici la règle est la plus simple, celle enoncée par Schwarzer Stern sur ce meme fil de discusion que je remercie car il m'a mis sur la piste</p>
<p>cela donne: <br/>
< script ><br/>
window.onload=changeSize; // "changeSize est juste un titre que tu choisis toi meme et que tu reprends pour function ci-apres//
function changeSize( ){<br/>
document.getElementById('droite').style.height=document.getElementById('section').offsetHeight + "px"; </p><br/>
}<br/>
< /script ><br/>
<br/>
</aside>
<section id="section">
<p>Ici est mon bloc de reference sur laquelle je veux que la taille de mes asides "droite" et gauche s'adaptent.</p>
<p>j'ai ici mis une hauteur de 2000px</p><br/><br/><br/><br/><br/><br/>
<p>ici pour les div de droite, l'astuce est de creer un variable correspondant a chacune des div (ici block0
qui correspond a la hauteur global de l'aside "droite"(invisible) qui s'est deja adaptée a la taille de la section par la meme fonction
que l'aside de gauche, le block1, le block2, le block3 et le block4)<br/>
ensuite on fait juste une soustraction des valeurs pour obtenir celle du dernier block a ajuster automatiquement.</p>
<p>cela donne :</p>
<p> < script > attention je rajoute des espaces autour du mot "script" pour qu'il apparaisse sur la page (juste au cas ou ou quelqu'un fait un simple copié/collé sur la page</p>
<p>window.onload=changeSize; <br/> // "changeSize est juste un titre que tu choisis toi meme et que tu reprends pour function ci-apres//<br/>
function changeSize( ){<br/>
document.getElementById('droite').style.height=document.getElementById('section').offsetHeight + "px"<br/>
var obj0=document.getElementById('droite');<br/>
var obj2=document.getElementById('block1');<br/>
var obj3=document.getElementById('block2');<br/>
var obj4=document.getElementById('block3');<br/>
var obj5=document.getElementById('block4');<p/>
var blockaajuster=obj0.clientHeight-obj2.clientHeight-obj3.clientHeight-obj4.clientHeight-obj5.clientHeight;<br/> //ici si tu as des margins entre tes div, tu dois soustraire la somme total apres l'obj5 </p>
<p>document.getElementById('mon-dernier-block').style.height=blockaajuster+"px";<br/>
}<br/>
< /script ><br/>
</section>
<aside id="droite">
<div id="block1">mon block 1</div>
<div id="block2">mon block 2</div>
<div id="block3">mon block 3</div>
<div id="block4">mon block 4</div>
<div id="mon-dernier-block"> Mon Bloc a ajuster automatiquement</div>
</aside>
<div id="footer">
<p>mon footer<p>
</div>
</body>
</html>
:
