Apparition de scroll avec des dimensions 100%

Bonsoir à tous !
J'essaie de faire ma structure HTML/CSS mais je galère à gérer les dimensions en 100%.
Par moment j'ai des scrolls qui apparaissent.

Voici mon HTML :

 <div style="height:100%;width: 100%;">
            <div style="height:100;background:#1a1a1a;width:100%;" >
              header
            </div>


            <div style="background:red;min-height: 100%;width: 100%">
                content
            </div>

        </div>

            html, body { height: 100%; }

Le scroll qui apparaît à la taille du header...
Je ne parviens pas à le supprimer...

Une idée?

Merci d'avance pour votre aide!
Je continue de chercher

Salut,

ton problème viens de la hauteur de 100% de ta div enfant.

- Ton header fait 100px de haut (je suppose, tu as oublié de mettre tes unités),
- donc la hauteur de ta page est de 100% + 100px -> scrollbar.
pour virer le scroll il faudrait que ta div enfant fasse 100% de la hauteur de la page - les 100px de ton header.

Pour résoudre ça tu peux mettre une hauteur à ton header en pourcentage (par exemple 15% puis 85% à ta div enfant),

Ou bien jouer avec les position absolute sur tes éléments :

header :

top: 0;
left: 0;
right: 0;

content :

top: 100px;
left: 0;
right: 0;
bottom: 0;

edit : par contre si tu optes pour la position absolue pour tes éléments tu n'auras plus besoin des dimensions pour tes blocs
Modifié par p0ulpe (07 Dec 2011 - 00:52)

Bonsoir,

Le problème provient de l'addition d'une hauteur à unités fixes (l'en-tête à 100px) avec une hauteur à unités relatives (le conteneur à 100%).

Le comportement que vous décrivez est tout à fait normal : on place une <div> de 100px de hauteur, puis en-dessous une autre <div> qui a pour hauteur celle de la fenêtre (100%) ; on a donc un scroll qui permet de descendre des 100px qui dépassent de la hauteur du viewport.

En effet, quand on indique height: 100%; il s'agit bien de "100% de la hauteur du bloc parent" et pas "100% de la hauteur qui est restante dans le bloc parent".

En général pour obtenir ce type de résultat on indique des mesures en pourcentages pour toutes les dimensions.

HTML :

<div>
	<div id="header">header</div>
	<div id="content">content</div>
</div>

CSS :

html, body {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
}

body div {
	width: 100%;
}

body > div {
	height: 100%;
}

#header {
	height: 25%;
	background-color: #1a1a1a;
}

#content {
	height: 75%;
	background-color: red;
}

Mais s'il faut impérativement que la hauteur de l'en-tête soit spécifiée en pixels, d'autres solutions existent.

Edit : oups, ça m'apprendra à me faire un café au beau milieu d'un post ! p0ulpe a bien résumé la situation et aborde la solution alternative que j'évoquais juste au-dessus.
Modifié par jeremy-p (07 Dec 2011 - 00:59)

Salut,

Si tu galères n'opte pas pour les positions absolues.
Mets toutes les dimensions en fluide effectivement.

Bonsoir !

Merci pour vos réponses !
Ma structure a évoluée et je rencontre un autre problème !
Tout réagit bien. Les scroll apparaissent au bon moment mais ne s'affichent pas aux bon endroit !

Le problème survient lorsque je redimensionne la fenêtre du navigateur.
Voici le site en temps normal : http://dev.alacoche.com/css1.jpg

Le bloc central réagit bien : contenu trop grand en hauteur alors le scroll vertical apparait.

Voici le site une fois la fenêtre redimensionnée : http://dev.alacoche.com/css2.jpg

Le scroll en bas apparaît car j'ai mis un min-width à ce bloc.
Sauf qu'il devrait y avoir un scroll vertical aussi ...
Si je scroll sur la droite, le scroll vertical est présent :
http://dev.alacoche.com/css3.jpg

Je comprends le comportement mais ne parviens pas à résoudre ceci !

Comme le scroll se base sur le contenu donc normal qu'il soit "à perpette" à droite.

Si je retire le min-height, ceci doit résoudre le problème sauf que non
Voir l'image : http://dev.alacoche.com/css4.jpg
Il y a un petit bug

Voici le code : http://jsfiddle.net/kapik/ARJJV/


Une petite solution dans vos tiroirs ? lol

Merci d'avance pour votre aide

ps:désolé pour le code, j'arrete pas les tests alors y'en a partout !