contrôle hauteur et largeur div par rapport à l'écran

**cyrano_de_bergerac** · 22/02/2012, 10h37

Bonjour,

J'ai une mise en page qui va ressembler à celle du tutoriel suivant: http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/.

J'aimerai qu'une fois que les hauteurs du bandeau et du pied de page soient fixés, que les div entre (menu et contenu) occupent toute la hauteur restante sur l'écran.

Même question, pour que le div contenu occupe la largeur restante de la page.
Pour l'en tête et le pied de page, je mets width: 100%, pour le menu je mets width:100px, mais après pour le contenu, je sais pas trop comment faire...
Je pourrai mettre 15% pour la largeur du menu et mettre 100-15=85% pour la largeur du contenu, mais je préfère pas, car j'aimerai que le menu ne change pas quelque soit la largeur du navigateur plus ou moins redimensionnée...

Merci pour votre aide!

**Muchos** · 22/02/2012, 16h31

Même avec des width en pourcents, la variation de largeur reste légère, la mise en page se maintient bien (il vaut mieux des ratios que des tailles fixes) et l'accessibilité est préservée.

Exemple:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<link href="/test.css" rel="stylesheet" />
	<title>Menu fixe et contenu sur reste de page</title>
</head>
<body>
	<nav>HEADER</nav>	
		<div id="menu">DIV #MENU</div>
		<div id="contenu">DIV #CONTENU</div>
	<footer>FOOTER</footer>
</body>
</html>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
/* L'en-tête et le pied-de-page */
nav, footer {width: 100%; height: 2em; background-color: blue;}
/* Le menu flotte à gauche */
#menu {float: left; width: 15%; height: 5em; background-color: pink;}
/* Le contenu vient automatiquement se placer, sans fixer de width */
#contenu {height: 5em; background-color: yellow;}

**cyrano_de_bergerac** · 22/02/2012, 18h30

Merci Muchos pour ta réponse!

Si je peux me résoudre à utiliser les ratios pour les largeurs afin de remplir la largeur de mon navigateur, cette méthode ne s'applique apparement aux hauteurs pour couvrir la hauteur de mon navigateur.

**Muchos** · 23/02/2012, 11h35

En effet : par essence, la largeur équivaut à la largeur de l'écran (elle peut être supérieure, mais on parle alors de « débordement ») tandis que la hauteur est indéfinie.

Dès lors, tu peux utiliser min-height: pour une hauteur minimum, et max-height: pour une maximum. min-width et max-width fonctionnent également.
NOTA: aucun ne marche avec IE 6 et inférieurs.

contrôle hauteur et largeur div par rapport à l'écran

Dimensionnement en CSS

Discussions similaires

Partager

Partager