Dev Faq
8
votes

En-tête de 100% de largeur ne remplit pas le navigateur

Lorsque la fenêtre du navigateur est suffisamment petite pour forcer une barre de défilement horizontale et que vous faites défiler la couleur d'arrière-plan de l'en-tête se termine avant le bord du navigateur. J'utilise une classe CSS. 

.s_header {
    margin: 0;
    width: 100%;
    display: block;
    border-bottom: 1px solid #000;
    background-color:#b8dbec;
    height:133px;
}

0 commentaires

5 Réponses :

1
votes

Je suggère de tout coeur que vous utilisiez Firefox et installez Firebug: http://getfirebug.com/

Il dispose de cette fonctionnalité froide qui vous permet d'inspecter un élément DOM, et cela vous dira tous les styles et quelle option de style ils proviennent. Donc, si le corps hérit d'un rembourrage errant (ou de quelque chose), vous pourrez voir visuellement ce qui se passe: -)

3 commentaires

Cela ne fournit pas de réponse à la question. Critiquer ou demander des éclaircissements d'un auteur, laissez un commentaire sous leur poste.

Merci pour les commentaires sur une réponse de près de 6 ans ... Avant que la critique / des éclaircissements était une pratique communautaire bien établie;)

De rien; En tant qu'utilisateur de confiance, je pense que vous comprenez comment cela est venu. La file d'attente de révision le sert et nous y travaillons

11
votes

Définissez les marges de votre balise corporelle

la manière en ligne xxx

dans votre style.css (ou autre) xxx

1 commentaires

J'ai le corps {marge: 0; Rembourrage: 0} mais ça n'a pas aidé. L'en-tête est beaucoup plus petit que le contenu ...

0
votes

Le moyen plus facile est de créer une DIV intérieure et de la définir à la même largeur que la page se passe juste avant que la barre de défilement n'apparaisse l'exemple 

<div class="s_header"> <div class="inner">

</div> </div>

.inner{
  width:990px;
  background:#f00;
  margin:0 auto;
}

1 commentaires

Presque jamais une bonne idée de définir la largeur d'une DIV à un numéro de codé dur.

0
votes

On dirait que le problème est sur les trois images de la table du corps. Lorsque vous réduisez la largeur du navigateur, il provoque la troisième image afin de créer des cellules de table individuelles, elles ne peuvent pas envelopper en une largeur fixe.

Vous pouvez essayer de franchir la solution en utilisant une image de fond répétée pour l'en-tête, mais j'écrireais la structure de la table avec une approche flottante.

0 commentaires
0
votes

My [très simple] [et probablement laid] Solution:

  1. Définissez votre propriété Min-largeur de votre corps à 100%;
  2. Définissez une classe minwidth définissant une propriété de 100% de largeur et une propriété min / code> basée sur le calcul suivant:
    • Après avoir défini votre format de police à 100%, vérifiez sa traduction en pixels dans un navigateur;
    • Divisez les moniteurs de nos jours 17 "Largeur standard de la résolution 1440PX avec ce résultat de la taille de la police 1M;
    • Définissez la propriété min-largeur exprimée en em à ce résultat;
    • E.g. Pour Font-famille: 'Gill Sans MT', Sans Serif; 100% de taille entraîne une police de 16 px;
      1440/16 = 90
      Votre CSS doit alors ressembler à ceci:
      html {autre} Corps {min-largeur: 100%;} .Minwidth {min-largeur: 90em; largeur: 100%;}

      Enfin 3. Appliquer le .Minwidth La classe à tous les enfants âgés de corps devant être à 100% de taille du corps large.

      Rezez la fenêtre de votre navigateur et / ou modifiez la résolution, vous devez vous débarrasser de ce problème ennuyeux pour toutes les résolutions d'écran jusqu'à 1440 * 900

      J'espère que je pourrais aider

0 commentaires

Articles qui pourrait vous intéresser :

Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Mettez en surbrillance l'élément d'étiquette après avoir cliqué sur la case à cocher
Changer la direction de défilement de la page Web sur la version mobile
Target first-child css styled-components