XHTML élément HTML à hauteur de 100% causant des barres de défilement

Question

Dans mon fichier CSS J'utilise ceci:

html,body{height:100%;padding:0;margin:0;border:0;}

Ce qui provoque une barre de défilement verticale apparaît sur IE8, Chrome 5 et Mozilla 3.6, toute dernière version.

En outre, le document est vide, il n'a que le code HTML, les balises de tête et le corps donc rien ne va sortir de l'écran pour faire cela.

débordement de réglage: hidden; sur l'élément html arrêtera le défilement sur la completly page.

Comment puis-je faire disparaître s'il vous plaît, mais aussi garder le défilement lorsque le contenu est supérieure à la hauteur d'affichage?

Merci.

Answer 1

J'ai besoin une hauteur de 100% dans un document XHTML afin que je puisse avoir div éléments 100%.

Quoi qu'il en soit, je l'ai trouvé la réponse:

Ce problème se produit uniquement lorsque le plus haut sommet élément a une marge supérieure. Il semble que cette marge supérieure est ajoutée à la hauteur de 100% ce qui en fait plus et provoquant la barre de défilement.

Donc, soit l'utilisation padding-top à l'espace le plus haut sommet élément ou utiliser un sans marge supérieure entre l'étiquette et l'élément suivant avec une marge supérieure.

Answer 2

overflow: hidden devrait aider et empêcher l'affichage des barres de défilement (vous aurez probablement perdre ~ 1px de contenu en raison d'erreurs d'arrondi

Answer 3

Il peut y avoir de meilleures façons mais je simplement par défaut à 98%, ce qui semble scrollbars dans tous les navigateurs permettent d'éviter.

vous pouvez également définir la hauteur à l'aide JavaScript mais qui se sent un peu hacky

Answer 4

je suis tombé sur cette question aujourd'hui et a trouvé la barre de défilement n'a pas été causé par une marge supérieure sur le premier élément, mais en ayant à la fois les éléments html et le corps ont une hauteur de 100%.

Ainsi, en utilisant cette règle CSS:

html,body { height: 100%; }

Je reçois des barres de défilement. Si je change que cette règle CSS:

html { height: 100%; }

je reçois pas de barres de défilement.

Paix ...

Answer 5

La barre de défilement verticale est à venir à cause de height:100%. Vous n'avez pas besoin que si il y a une raison pour vous d'utiliser.

Answer 6

Pourquoi vous définissez la hauteur de 100% dans le corps?

Il obtiendra cette hauteur par défaut.

Il est logique à la hauteur de jeu dans le corps que si vous souhaitez définir une hauteur numérique en px, comme permet de dire 600px