XHTML élément HTML avec 100% de la hauteur causant des barres de défilement
Dans mon fichier CSS, j'utilise ceci:
html,body{height:100%;padding:0;margin:0;border:0;}
Qui provoque une barre de défilement verticale apparaîtra sur IE8, Chrome 5 et Mozilla 3.6, toutes les version la plus récente.
Aussi, le document est vide, il n'a que le html, head et body balises donc, rien n'est hors de l'écran à cause de cela.
Réglage overflow:hidden; sur l'élément html sera complètement arrêter le défilement de la page.
Comment puis-je la faire disparaître, mais aussi de garder le défilement lorsque le contenu est plus élevé que la hauteur d'affichage?
Merci.
C'est à cause de l'arrondissement des erreurs de calcul de la fenêtre d'affichage dans tous les navigateurs. Utilisez hauteur:98% ou overflow:hidden.
OriginalL'auteur Francisc | 2010-08-24
Vous devez vous connecter pour publier un commentaire.
J'ai besoin de 100% de la hauteur dans un document XHTML afin que je puisse avoir les éléments div à 100%.
De toute façon, j'ai trouvé la réponse:
Ce problème se produit uniquement lorsque le plus haut de l'élément a une marge supérieure.
Il semble que la marge du haut est ajouté à l'100% de la hauteur de décision de plus en plus haut et causant de la barre de défilement.
Donc soit utiliser padding-top à l'espace le plus haut de l'élément ou de l'utilisation d'un sans haut de la marge entre la balise et l'élément suivant avec une marge supérieure.
L'agent de l'utilisateur de la feuille de style dans certains navigateurs ajoute une marge
body
, qui suit généralement le<html>
marque, de sorte que ce qui se passera automatiquement. Utiliser un reset CSS, alors.OriginalL'auteur
overflow:hidden aider et empêcher l'affichage des barres de défilement (vous aurez probablement perdre ~1px de contenu en raison des erreurs d'arrondi
OriginalL'auteur
Il peut y avoir de meilleures façons mais j'ai tout simplement par défaut à 98%, ce qui semble écarter les barres de défilement dans tous les navigateurs.
vous pouvez également régler la hauteur à l'aide de JavaScript, mais qui se sent un peu hacky
OriginalL'auteur
Je suis tombé sur cette question aujourd'hui et a trouvé la barre de défilement n'était pas causée par une marge supérieure sur le premier élément, mais en ayant à la FOIS le html et les éléments du corps, d'une hauteur de 100%.
Donc, à l'aide de cette règle CSS:
html,body { height: 100%; }
- Je obtenir des barres de défilement. Si je change que cette règle CSS:
html { height: 100%; }
Je n'ai pas de barres de défilement.
La paix...
OriginalL'auteur
La barre de défilement verticale est venue parce que de
height:100%
. Vous n'en avez pas besoin, sauf si il ya une raison pour vous d'utiliser.OriginalL'auteur
Pourquoi vous mettez-vous à 100% de la hauteur du corps?
Il va obtenir cette hauteur par défaut.
Il est logique de définir la hauteur du corps uniquement si vous souhaitez définir une valeur numérique de la hauteur en px comme permet de dire 600px
Comme Basiclife dit, ce n'est pas le cas. Voir jsfiddle.net/teDG3/1 pour une simple démonstration.
OriginalL'auteur