18041 sujets

Questions générales et questions de débutants

Bloc de 100% de haut et problème de scrolling

Bonjour à tous,

je suis nouveau sur ce forum. Je me suis inscrit parce qu'il y a un problème que je n'arrive pas à régler. Voilà, je refais le site de mon groupe en css. J'ai un motif de fond qui se répète, et j'aimerais mettre une autre image de fond dans mon conteneur principal. Il fait 100% de hauteur. Mon problème c'est que quand je redimensionne la fenêtre de mon navigateur (IE7 comme Mozilla), il me crée une scrollbar sur mon conteneur. J'ai donc 2 scrollbars dans la même page.

Voilà le lien :http://www.mademoiselleb.net/css/


html{
height:100%;
}

body{
margin:0px;
text-align:center;
background-image:url(images/pattern_100.gif);
font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif;
color:#171717;
height:100%;
}

#conteneur{
background-image:url(images/fond-corps.jpg);
width:704px;
text-align:center;
margin-left:auto;
margin-right:auto;
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
overflow:auto;
height:100%;
}


vous pouvez voir l'ensemble de mon code css ici :
http://www.mademoiselleb.net/css/styles.css

d'avance merci de vos réponses Smiley smile
Modifié par durff (12 Apr 2007 - 13:43)
Bonjour et bienvenue sur le forum.

Les formalités d'abord :
Pour conserver une bonne lisibilité des messages sur le forum, il est demandé d'utiliser les les balises code pour présenter le code source des exemples.
Pourrais-tu éditer ton message pour te conformer à cette règle de mise en forme ?
Merci d'avance.

Les CSS ensuite :
Le problème vient du fait que tu as bloqué la hauteur du conteneur à 100%. Si tu demandes une hauteur de 100% de la fenêtre, tu obtiens une hauteur de 100% de la fenêtre... et tant pis si ton contenu est plus long, ça dépasse. Sauf si tu as utilisé une overflow: auto, auquel cas tu auras une barre de défilement interne, ce qui n'est pas un bon plan.

Tu peux travailler ce tutoriel, en zappant complètement l'étape numéro 2, pour voir ce qui cloche dans ce que tu as fait.

Pour faire les choses simplement et sans trop de prise de tête, je recommanderais les modifications suivantes :
[b]HTML :[/b]
<body>
<div id="conteneur">
<div id="sub-conteneur">
...
</div><!-- fin de div#sub-conteneur -->
</div><!-- fin de div#conteneur -->
</body>

[b]CSS :[/b]
html, body {
	height: 100%;
	margin: 0; padding: 0;
}
div#conteneur {
	width:704px;
	margin: 0 auto;
	padding: 0; /* IMPORTANT */
	overflow: hidden; /* Contexte de formatage pour éviter les dépassements de flottants */
	[b]min-height: 100%;[/b]
}
div#sub-conteneur {
	padding: 10px; /* Crée le retrait interne sans agrandir div#conteneur, et évite les problèmes de fusion des marges */
}

[b]Correctif CSS pour IE6 et inférieurs :[/b]
/* À adresser à IE6 (pas IE7) et inférieurs via un commentaire conditionnel. */
div#conteneur {
	height: 100%; /* Émule min-height et évite le dépassement des flottants */
	overflow: visible; /* Évite que le bloc ne soit tronqué à 100% de la hauteur de la fenêtre */
}


Pour les commentaires conditionnels, la FAQ du forum en parle.
J'ai édité mon message. Merci beaucoup pour ta réponse, je vais regarder tout ça. Si j'ai un problème je reviens.
Sujet clos
Aller à