Lorsque je redimensionne la fenêtre et que la barre de défilement verticale apparaît, si je la fais défiler vers le bas, - le bas se casse. Je ne comprends pas pourquoi, mais je pense que cela a quelque chose à voir avec la façon dont la page utilise 100% de hauteur. Toute aide serait appréciée!css 100% bug de hauteur
est ici la page: zxsdesign.com/main1.html
Voici une capture d'écran
zxsdesign.com/bug1.PNG http://zxsdesign.com/bug1.PNG
Il est un mélange de vous en utilisant la propriété CSS height et absolue positionnement. ajm a parlé d'utiliser min-height - idéalement, vous devriez l'utiliser au lieu de height lorsque vous faites des choses 100% de haut.
Sur votre autre problème. Lorsque vous positionnez des éléments absolument, ils ne font plus partie de la structure de la page. Au lieu de cela, ils vivent dans un plan séparé, et n'affectent donc pas les dimensions de la page. Lorsque votre <div id="flashcontent"> dépasse la limite de la fenêtre, cela n'affecte pas les bordures de <body>.
Vous pouvez résoudre ce problème en n'utilisant pas position: absolute. Il n'y a pas vraiment besoin de. Au lieu de cela, vous pouvez placer l'élément #flashcontent normalement, et se débarrasser de l'élément #bg complètement - juste donner #flashcontent un fond à la place. Ensuite, utilisez margin: 0 auto; et padding-top: 179px; pour le positionner au bon endroit.
Malheureusement hauteur: 100%; est implémenté différemment ... Vous ne pouvez pas être sûr qu'un navigateur fait ce que vous voulez quand vous l'utilisez. Essayez d'utiliser clear: left; ou clair: les deux; dans ton style.
Je n'aurais jamais pensé que 100% peut être si difficile. J'ai essayé d'utiliser la propriété claire, mais en vain. Merci pour votre temps! –
100% La hauteur est une hauteur d'écran. Si vous faites défiler vers le haut, il couvre 100% de la hauteur. Faites aussi évoluer vos blocs, ou au moins déplacez-vous au centre de l'écran. Vous pouvez le faire en définissant leur rembourrage haut et bas en automatique.
De plus, votre étiquette de tête n'est pas fermée correctement. Vérification this
Oui, j'ai oublié le titre dans l'étiquette de la tête :) C'est soit je n'ai pas compris ce droit ou simplement ajouter automatique à bas et haut n'a eu aucun impact. Merci pour votre temps! –
Votre page est entièrement basée sur l'utilisation de 100% de hauteur pour tous vos éléments. Si la fenêtre d'affichage du navigateur de l'utilisateur est assez grande, c'est bien; Cependant, s'ils redimensionnent leur navigateur pour être suffisamment petit, votre page sera 100% de cette taille plus petite et les choses vont tomber du fond.
Regardez dans le réglage d'une hauteur minimale sur l'un de vos éléments de conteneur. Cela forcera les choses à arrêter le redimensionnement si la fenêtre du navigateur tombe en dessous de cette hauteur. Vous pouvez également définir une ancienne hauteur assez grande pour contenir votre pièce flash sur l'un de vos éléments de conteneur et laisser les autres en hériter.
Et, étant donné que IE6 ne supporte pas les min-height (FF2 +, IE7, Safari font tous), vous aurez besoin de pirater dans like so.
Merci pour votre aide, je vais certainement le noter. –
J'ai fait exactement ce que vous avez dit. Et ça m'a aidé, mais il y a toujours 5px d'espace sur le fond qui ne sont pas couverts. Une idée pourquoi? Nous vous remercions de votre temps. –
Maintenant que j'ai vérifié la page dans tous les navigateurs populaires, voici ce que j'ai vu: Firefox: très proche, - ces foutus 5px; Opéra: fonctionne comme un charme; IE7: ne fonctionne pas; Safari: ne fonctionne pas; Chrome: ne fonctionne pas. Je suis totalement perdu. –
J'ai oublié d'ajouter min à la hauteur dans #flashcontent. Ma faute. Maintenant, il semble juste. Mais ce que je ne comprends pas pourquoi dans la barre de défilement verticale d'Opera descend tout le long, mais dans d'autres navigateurs, il s'arrête lorsque #flashcontent se termine. –