28202 sujets

CSS et mise en forme, CSS3

Height 100% mais pas quand il y a un ascenceur

Bonjour tout le monde,

Webmaster depuis quelques années, j'abandonne enfin la mise en page avec les tableaux pour me mettre au CSS (il était temps me direz-vous). Mais, comme tout nouveau codeur CSS, j'ai des difficultés. Notamment celle-ci :

Je créé un site pour un de mes clients, mais j'ai un soucis avec le bandeau de gauche de ma page, qui doit s'afficher jusqu'en bas (height 100%, avec body et html en height 100% aussi).

Cependant, quand une de mes div de contenu de page depasse la hauteur initale du navigateur, j'ai un ascenceur (normal jusque là), mais par contre le bandeau lui s'arrête à la hauteur initiale de la fenêtre et ne continue pas quand on descend avec l'ascenceur.

Voilà une page qui a ce problème:
http://www.nextstation2007.com/presentation.php
pour la css : http://www.nextstation2007.com/nextstation.css

Je pense que ça vient de mes div #principal-gauche et #principal-droite...mais j'ai beau essayer différentes solutions, je patine.

Alors, si une âme charitable passe par là, ça m'aiderait beaucoup.

Merci d'avance.
Bonjour,

Je crois qu'avant d'avoir un problème de CSS, tu as un problème de construction de ton code HTML. Si je reprends rapidement la structure des principaux blocs:
<body>
	<div id="bandeau"></div>
	<div id="menu">
		<div id="listemenu">...</div>
		<div id="main">
			<div id="image-haut">...</div>
			<div id="image-haut2">...</div>
			<div id="principal">...</div>
		</div>
	</div>
</body>

Si le fait de mettre div#main à l'intérieur de div#menu te semble logique, il y a un problème...

Pour revenir au problème lui-même: height: 100% pour div#bandeau fera référence à la hauteur de body, qui correspond à 100% de la hauteur de html, qui correspond à 100% de la hauteur du viewport (la zone d'affichage). Vu que la hauteur du viewport ne dépend pas de la hauteur totale du contenu de body, ça ne peut pas marcher.

Une solution serait d'utiliser un conteneur global (div#global...) en min-height: 100%, et d'appliquer image et/ou couleur de fond à ce bloc conteneur, dont la hauteur dépendra également de la hauteur de son contenu.

Exemple rapide:
<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<style type="text/css">
	html, body {
		margin: 0;
		padding: 0;
		height: 100%;
	}
	div#global {
		min-height: 100%;
		background: green;
	}
	div#global-bis {
		margin: 0 0 0 200px;
		padding: 1px 0 1px 20px;
		font-size: 5em;
		background: white;
	}
	</style>
</head>

<body>
<div id="global">
	<div id="global-bis">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
		<p>Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.</p>
	</div><!-- #contenu -->
</div><!-- #global -->
</body>
</html>


Si on part sur cette base, deux choses à surveiller:
- obtenir l'effet de min-height dans IE6 (voir la FAQ du forum à ce sujet);
- le positionnement absolu: il faudra l'éviter pour les principaux blocs de contenu, le positionnement absolu faisant sortir l'élément du flux (c'est à dire que le conteneur global ne sera plus agrandi par ses enfants si ceux-ci sont positionnés en absolu).
Sujet clos
Aller à