Bannière La largeur de 100% s'étend à la taille de la fenêtre, mais pas à la taille du document.

Nous avons une bannière iamge sur notre page Web qui est un dégradé qui est répété sur l'axe des x. Le problème est que, si notre contenu sur notre page Web (qui est créé dynamiquement sur la base des données de notre base de données) s'étend sur une largeur supérieure à la largeur de la fenêtre, alors notre bannière ne couvre plus toute la largeur du document. Quelqu'un sait comment réparer ceci?Bannière La largeur de 100% s'étend à la taille de la fenêtre, mais pas à la taille du document.

Un exemple simple est affiché ci-dessous. Le bleu est notre "bannière" le "rouge" est notre contenu.

<html> 
<head> 
    <style> 

     *{ 
      padding:0; 
      margin:0 auto; 
     } 

     #header{ 
      height:80px; 
      background-color:blue; 
      width:100%; 
     } 

     #content{ 
      width:1500px; 
      background-color:red; 
     } 

    </style> 
</head> 
<div id="header"></div> 
<div id="content"><h1>TEST</h1></div> 

</html>

Source

2010-07-22 Scott K

Essayez de placer l'en-tête à l'intérieur du contenu div. Comme ceci:

... 
</head> 

<div id="content"> 
    <div id="header"></div> 
    <h1>TEST</h1> 
</div> 

</html>

Mieux encore, ajoutez un emballage:

<html> 
<head> 
    <style> 

     *{ 
      padding:0; 
      margin:0 auto; 
     } 

     #wrapper { 
      width:1500px;  
     } 

     #header{ 
      height:80px; 
      background-color:blue; 
      width:100%; 
     } 

     #content{ 
      width:100%; 
      background-color:red; 
     } 

    </style> 
</head> 

<div id="wrapper"> 
    <div id="header"></div> 
    <div id="content"><h1>TEST</h1></div> 
</div> 

</html>

Source

2010-07-22 17:18:54

Définition d'un min-largeur sur votre #header qui est égale à la largeur #content le ferait:

#header{ 
    height:80px; 
    background-color:blue; 
    width:100%; 
    min-width: 1500px; 
}

Source

2010-07-22 17:23:44 Pat

mettre un

<div id="wrapper"> header & content </div>

autour de tout ... faire wrapper position:relative, donc 100% en-tête est la largeur de l'emballage, qui sera quel que soit le contenu.

Source

2010-07-22 17:38:23 vinhboy

Bannière La largeur de 100% s'étend à la taille de la fenêtre, mais pas à la taille du document.

Répondre

Questions connexes