CSS: la barre liquide avec le texte ne sera pas développée
-
19-08-2019 - |
Question
J'ai une barre horizontale qui a reçu une largeur
de 100%
. Dans la barre horizontale, le texte est aligné à gauche dans un conteneur 978px
. Chaque fois que la fenêtre du navigateur est réduite de manière à avoir une largeur inférieure à 978px
, une barre de défilement au bas de la page apparaît. Chaque fois que je fais défiler vers la droite, la barre ne couvre plus la largeur de la page, mais est laissée derrière. Je comprends pourquoi cela se produit, mais je ne sais pas quoi faire pour le réparer. Si vous avez des idées, faites le moi savoir. Merci!
La solution
eh bien, vous avez #header défini à 100% de son bloc contenant (ce qui serait le corps). Lorsque vous réduisez le corps, la largeur de l'en-tête diminue. Si la largeur du corps est inférieure à la largeur du conteneur, la barre noire ne s'étendra pas complètement.
Que préférez-vous qu'il fasse exactement?
- pas de barre de défilement: retirez le conteneur, centrez le texte à l'aide de #header
-La barre noire étend toute la distance: la solution la plus simple consiste à attribuer au conteneur une couleur de fond.
Autres conseils
Changer:
width: 978px;
à:
max-width: 978px
Cela semblait faire l'affaire en FF3, IE7 et Chrome.