Bonjour à tous, et félicitations pour votre excellent site !
Voilà, j'ai un problème qui semble récurrent, et qui a même une entrée dans votre FAQ : "Comment faire une mise en page de 100% de hauteur avec des parties fixes (en-tête, par ex) ?". Sauf que les réponses apportées ne me conviennent pas, et comme tout cela date un peu, peut être que de nouvelles solutions sont apparues depuis.
Je vous expose mon objectif plus précisément :
Je veux utiliser 100% de la largeur et de la hauteur de ma page.
Je veux un header en haut de la page avec une hauteur fixe.
En dessous je veux 3 div côte à côte qui occupent tout le reste de la hauteur de la page.
Le div de gauche contient un menu et a une largeur initialement fixée.
Le div central contient une barre de splitpane (afin de faire varier les largeurs des div de droite et de gauche).
Le div de droite contient une iframe pour afficher des pages pointées par les items de menu du div de gauche.
Mon problème est que je n'arrive pas à faire occuper 100% du reste de l'espace en hauteur à mes div sous le header. Dans l'exemple qui suit, j'ai fixé la hauteur de ces div arbitrairement à 300 px. Or il faudrait que cette hauteur soit de (hauteur de la page - hauteur du header). Et il faut que cette hauteur soit fixée, pour que mon iframe la reconnaisse quand je lui dis d'occuper 100% de la hauteur de mon div.
Alors, quelqu'un a une idée pour réaliser cela en CSS (compatible IE7 et FF3). Sinon, je n'aurai plus qu'à essayer de réaliser cela avec une fonction javascript sur du onresize... mais ça va être de la bidouille
Voilà, j'ai un problème qui semble récurrent, et qui a même une entrée dans votre FAQ : "Comment faire une mise en page de 100% de hauteur avec des parties fixes (en-tête, par ex) ?". Sauf que les réponses apportées ne me conviennent pas, et comme tout cela date un peu, peut être que de nouvelles solutions sont apparues depuis.
Je vous expose mon objectif plus précisément :
Je veux utiliser 100% de la largeur et de la hauteur de ma page.
Je veux un header en haut de la page avec une hauteur fixe.
En dessous je veux 3 div côte à côte qui occupent tout le reste de la hauteur de la page.
Le div de gauche contient un menu et a une largeur initialement fixée.
Le div central contient une barre de splitpane (afin de faire varier les largeurs des div de droite et de gauche).
Le div de droite contient une iframe pour afficher des pages pointées par les items de menu du div de gauche.
Mon problème est que je n'arrive pas à faire occuper 100% du reste de l'espace en hauteur à mes div sous le header. Dans l'exemple qui suit, j'ai fixé la hauteur de ces div arbitrairement à 300 px. Or il faudrait que cette hauteur soit de (hauteur de la page - hauteur du header). Et il faut que cette hauteur soit fixée, pour que mon iframe la reconnaisse quand je lui dis d'occuper 100% de la hauteur de mon div.
<!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" xml:lang="fr" lang="fr">
<head>
<title>entete hauteur fixe - hauteur 100%</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
margin: 0;
padding: 0;
}
#header {
height: 100px;
background-color: #99CCCC;
}
#gauche{
position: absolute;
left: 0;
width: 500px;
height: 300px;
background-color:#CC3300;
}
#milieu {
position: absolute;
left: 500px;
width: 20px;
height: 300px;
background-color:#999999;
}
#droite {
margin-left: 520px;
height: 300px;
background-color:#00FF33;
}
p {margin: 0 0 10px 0;}
</style>
</head>
<body>
<div id="header">header</div>
<div id="gauche">gauche</div>
<div id="milieu">m</div>
<div id="droite">
<iframe name="if1" id="if1" frameborder="0" width="100%" height="100%" src="http://www.alsacreations.com/"></iframe>
</div>
</body>
</html>
Alors, quelqu'un a une idée pour réaliser cela en CSS (compatible IE7 et FF3). Sinon, je n'aurai plus qu'à essayer de réaliser cela avec une fonction javascript sur du onresize... mais ça va être de la bidouille
