28172 sujets

CSS et mise en forme, CSS3

[Résolu] 3e division d'une page la hauteur du reste de la page

Bonjour,

Je vous présente une image de ma page web:

upload/29725-Menuinterv.png

Elle est constituée de 3 divisions. Chaque division a sa couleur de fond. La 3e division, en bas, peut être appelée à dépasser la page et doit être munie d'un scroll bar pour elle toute seule.

Le résultat présenté a été obtenu en donnant la hauteur de chaque division en %. Malheureusement, je dois modifier la hauteur pour attribuer 100px à la première division et 30 px à la 2e. J'aimerais que la 3e division occupe "le reste" de l'écran.

Présentement, la structure de mon code ressemble à ceci:


<div class="bandeau6">
</div>
<div class="navigation">
</div>
<div class="fond6">
</div>


J'ai trouvé sur ce site des conseils modifiant la structure de cette façon:


<div class="fond6">
<div class="bandeau6">
</div>
<div class="navigation">
</div>
</div>


En attribuant 100% de la hauteur à la division fond6 et en incluant les autres divisions à l'intérieur, ça SEMBLAIT au départ résoudre mon problème.

Mais la scroll bar est maintenant liée à la hauteur de la page complète, ce qui me fait perdre mon menu lorsque je descends.

J'ai essayé d'inclure un padding de 130px (hauteur combinée des 2 premières divisions) à ma division. Mais les divisions bandeau6 et navigation se placent alors sous la section de 130px.

J'ai essayé en ne donnant pas de hauteur à la division. Alors, le fond ne s'affiche pas là où il n'y a pas de contenu.

Mon site est sur un VPN, je ne peux donc malheureusement pas vous donner accès à la page.

Peut-être n'ai-je pas été claire. Si vous avez des questions, ne vous gênez pas. C'est mon premier "post", j'espère avoir utilisé correctement les outils d'insertion d'image et de code à ma question...

Si vous connaissez un moyen d'attribuer la hauteur "reste de la page" à une division, j'aimerais la connaître.

Merci!
Modifié par siobesirb (21 May 2010 - 14:13)
Bonjour.
Tu pourrais utiliser la méthode qu'on t'a donnée, à savoir d'inclure le header et le menu dans le troisième bloc, puis placer les deux premiers de manière fixe, de telle sorte qu'ils sembleront immobiles même en cas de scroll.
Re-bonjour,

J'ai essayé de fixer les 2 premières divisions. Avec des résultats plutôt surprenants. Peut-être y a-t-il quelque chose que j'ai mal saisi...

J'ai inclus un padding au top de ma division principale, pour que le contenu s'affiche en bas des divisions fixes.

J'ai dû ajouter width:100% à la navigation, parce que le tout s'affichait à la gauche. Mais maintenant, ma barre de navigation dépasse l'écran à la droite.

Et ma division bandeau, qui normalement devrait être en haut, suit le début de l'affichage de mon texte sur la division principale, en plus que le background ait disparu.

De plus, le scroll a totalement disparu.

Voici le résultat actuel:
upload/29725-Capture.png

Pour aider, je joins aussi le CSS


div.bandeau6
{
	background-image:url(../images/bandeau6.jpg);
	background-color:#179cd5;
	height:100px;
	background-position: left top;
	background-repeat:repeat-y;
	position:fixed;
	width:100%
	top:0;
	left:0;
}
div.navigation
{
	background:#5e5e5e;
	height:30px;
	color:white;
	font-size:16px;
	padding-left:10;
	padding-right:10;
	padding-top:7;
	padding-bottom:7;
	border:0;
	text-align:right;
	position:fixed;
	top:101;
	left:0;
	width:100%;
}
div.fond6
{
	height:auto;
	height:100%;
	min-height:100%;
	overflow:auto;
	padding-top:150px; 
}


Soit la solution est inappropriée à mon problème, soit je l'ai mal appliquée...

Merci de m'aider!
Et comme ça ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
	<head>
		<style>
			body {
				margin: 0;
			}
			div.bandeau6 {
				height:100px;
				background-color:#179cd5;
			}
			div.navigation {
				background:#5e5e5e;
				height:30px;
			}
			div.fond6 {
				background: #c0eeff;
				padding-top:20px;
				position: absolute;
				top: 130px;
				right: 0;
				bottom: 0;
				left: 0;
				overflow:auto;
			}
		</style>
	</head>
	<body>
		<div class="bandeau6"></div>
		<div class="navigation"></div>
		<div class="fond6">Bla bla bla...</div>
	</body>
</html>

Modifié par VincentB85 (20 May 2010 - 16:36)
Sujet clos
Aller à