100% largeur en-tête 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 vers la droite la couleur de fond de l'en-tête se termine avant le bord du navigateur. J'utilise une classe css.100% largeur en-tête ne remplit pas le navigateur

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

Le contenu de <div class="s_header"> ne sont pas aussi large que la table 4 de la colonne au-dessous où les totaux de contenu abot 840px avec des largeurs image + rembourrage et une colonne de largeur fixe 140px. Ainsi, lorsque la fenêtre du navigateur est inférieure à 840px, il y a une barre de défilement horizontale, ce qui est correct, sauf que l'arrière-plan de l'en-tête est coupé lorsque vous faites défiler.

Les éléments parents de <div class="s_header"> sont des corps et html pour lesquels 100% de largeur signifie la largeur de la fenêtre. J'ai essayé y compris débordement: visible dans .s_header classe sans succès.

La largeur du corps est également fixé à 100% de marge 0

est-il un moyen simple que je peux obtenir l'arrière-plan pour étendre à droite quand une barre de défilement apparaît?

La page problème est à here

Toutes les suggestions seront grandement appréciés.

Source

2009-07-22 Anonymous

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

Il a cette fonctionnalité intéressante qui vous permet d'inspecter un élément dom, et il vous dira tous les styles, et ce stylesheet ils proviennent. Donc, si le corps hérite d'un certain rembourrage errante (ou quelque chose), vous pourrez voir visuellement ce qui se passe :-)

Source

2009-07-22 17:51:14

Cela ne fournit pas de réponse À la question. Pour critiquer ou demander des éclaircissements à un auteur, laissez un commentaire sous son article. – kolossus

Merci pour les commentaires sur une réponse de près de 6 ans ... avant que la critique/clarification soit une pratique communautaire bien établie;) –

De rien; En tant qu'utilisateur de confiance, je crois que vous comprenez comment cela s'est produit. La file d'attente de révision sert et nous travaillons – kolossus

définir les marges de votre balise body

La façon

en ligne

<body style="margin: 0px 0px 0px 0px;">

Dans votre style.css (ou tout)

body { 
    margin: 0px 0px 0px 0px; 
}

Source

2009-07-22 17:52:35

+ mode court et remplissage: body {margin: 0; padding: 0} – gmunkhbaatarmn

J'ai un corps {margin: 0; padding: 0} mais cela n'a pas aidé. L'en-tête est beaucoup plus petit que le contenu ... – DashaLuna

simple est de créer une div intérieure et le mettre à la même largeur que la page va juste avant la barre de défilement apparaît par exemple

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

</div> </div> 

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

Source

2009-07-23 10:50:26

Presque jamais une bonne idée de définir la largeur d'une div à un nombre codé en dur. –

Il semble que le problème réside dans les trois images de la table de corps. Lorsque vous réduisez la largeur du navigateur, les trois images sont regroupées, car elles ne peuvent pas être enveloppées dans des cellules individuelles, ce qui entraîne une largeur fixe.

Vous pourriez essayer de truquer la solution en utilisant une image de fond répétitive pour l'en-tête, mais je réécrirais la structure de la table avec une approche flottante.

Source

2009-07-23 10:59:34

Mon [très simple] [et probablement laid] solution:

définir votre balise body min largeur propriété à 100%;
définir une classe minwidth définissant une propriété largeur de 100% et une min-width propriété sur la base du calcul suivant:
- avoir mis votre taille de police à 100%, vérifier sa traduction en pixels dans un navigateur;
- divisent le aujourd'hui moniteurs 17" résolution standard 1440px largeur avec ce pixels 1em résultat taille de la police;
- définir la propriété min-width exprimée en em à ce résultat,
- par exemple pour la famille de la police: ' Gill Sans MT », sans-serif; 100 résultats% de la taille d'une police de 16px;
  1440/16 = 90
  votre CSS doit alors ressembler à ceci:
  html {whatever} body {min-width: 100%;} .minwidth {min-width:90em;width:100%;}

Enfin 3. appliquez la classe .minwidth à tous les enfants du corps ayant une taille de corps de 100%.

la dimension fenêtre de votre navigateur et/ou modifier la résolution, vous auriez dû se débarrasser de ce problème gênant pour toutes les résolutions d'écran jusqu'à 1440 * 900

espoir que je pourrais aider

Source

2012-03-28 16:14:32

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

Répondre

Questions connexes