La largeur de la fenêtre ne permet pas à l'arrière-plan de s'afficher comme prévu

Je rencontre un problème lorsque la couleur d'arrière-plan se comporte de façon inattendue lorsque la fenêtre est réduite à une taille inférieure à celle spécifiée pour certains de mes éléments. Alors que les barres de défilement apparaissent correctement, l'arrière-plan n'est pas ce que je m'attendais. Lorsque la fenêtre est aussi grande ou plus grande, les arrière-plans se comportent comme prévu. Lors de l'inspection des éléments de la page avec Firebug, il semble que l'élément body ne s'étire pas même si le contenu est à l'intérieur. Qu'est-ce qui fait que les arrière-plans se comportent de cette façon?La largeur de la fenêtre ne permet pas à l'arrière-plan de s'afficher comme prévu

J'ai fourni ce que je crois être le code html et CSS, mais si j'ai omis quelque chose s'il vous plaît faites le moi savoir.

Shrunk Viewport Exemple Broken Example

Viewport agrandie Exemple Working Example

CSS

html 
{ 
    background: #A37C45; 
} 

body 
{ 
    background: 
     #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0; 
} 

#container 
{ 
    width: 100%; 
} 

#header 
{ 
    width: 730px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 5px; 
    overflow: hidden; 
} 

#main 
{ 
    width: 730px; 
    margin-top: 2px; 
    margin-left: auto; 
    margin-right: auto; 
    overflow: hidden; 
} 

#footer 
{ 
    background: 
     url("../images/backgrounds/grass.png") repeat-x scroll left top; 
    clear: both; 
    width: 100%; 
    overflow: hidden; 
    padding-top: 30px; 
    margin-top: 20px; 
} 

#footercontainer 
{ 
    width: 100%; 
    background-color: #A37C45; 
    margin-top: -1px; 
} 

#footercontent 
{ 
    width: 730px; 
    margin-left: auto; 
    margin-right: auto; 
    padding-bottom: 25px; 
    overflow: hidden; 
}

HTML

<html> 
    <body> 
    <div id="container"> 
     <div id="header"> 
     </div> 
     <div id="main"> 
     </div> 
    </div> 
    <div id="footer"> 
     <div id="footercontainer"> 
     <div id="footercontent"> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

Source

2010-09-20 ahsteele

La raison pour laquelle vous voyez ce comportement est parce que vos width: 100% éléments ne prennent que la largeur de la fenêtre comme la quantité d'arrière-plan dont ils ont besoin pour rendre.

Vous pouvez le réparer en ajoutant un min-width declaration à votre CSS de l'élément body. Il suffit de le mettre à la largeur du plus grand élément imbriqué:

body { 
    min-width: 730px; 
    background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0; 
}

Source

2010-09-20 19:21:12 Pat

il convient d'ajouter 10 pixels à 730px mais tout a fonctionné! – ahsteele

min-largeur est pas pris en charge dans IE donc utiliser l'expression

body { 
    min-width: 730px; 
    background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0; 

    /* IE Version */ 
    width:expression(document.body.clientWidth < 730 ? "728px" : "auto"); 
}

Source

2011-05-31 15:49:20

Je n'ai pas vu cela ne fonctionne pas dans IE. Y a-t-il des versions particulières dont je devrais être au courant? – ahsteele

La largeur de la fenêtre ne permet pas à l'arrière-plan de s'afficher comme prévu

Répondre

Questions connexes