Je suis en train de mettre en place une structure de site et j'ai des soucis avec la hauteur de mes div :
CODE
<html>
<style>
* {padding: 0; margin: 0;}
html,body {
height:100%;
}
#page {
height:100%;
width:900px;
}
#header {
height:120px;
width:100%;
background-color:red;
}
#contenu {
height:100%;
width:100%;
}
#contenu_left {
float:left;
height:100%;
width:70%;
background-color:blue;
}
#contenu_right {
float:right;
height:100%;
width:30%;
background-color:cyan;
}
#footer {
height:50px;
width:100%;
background-color:red;
}
</style>
<body>
<div id="page">
<div id="header"> </div>
<div id="contenu">
<div id="contenu_left"></div>
<div id="contenu_right"></div>
</div>
<div id="footer"> </div>
</div>
</body>
</html>
<style>
* {padding: 0; margin: 0;}
html,body {
height:100%;
}
#page {
height:100%;
width:900px;
}
#header {
height:120px;
width:100%;
background-color:red;
}
#contenu {
height:100%;
width:100%;
}
#contenu_left {
float:left;
height:100%;
width:70%;
background-color:blue;
}
#contenu_right {
float:right;
height:100%;
width:30%;
background-color:cyan;
}
#footer {
height:50px;
width:100%;
background-color:red;
}
</style>
<body>
<div id="page">
<div id="header"> </div>
<div id="contenu">
<div id="contenu_left"></div>
<div id="contenu_right"></div>
</div>
<div id="footer"> </div>
</div>
</body>
</html>
En fait, je souhaiterais que le bloc contenu prenne au minimum la hauteur restante ( c'est à dire 100% - les 120px du header - les 50px du footer ).
Savez vous comment faire ?
merci par avance.
