横幅100％宽度延伸到窗口大小，但不是文档大小

我们在我们的网页上有一个横向横幅，它是在x轴上重复的渐变。问题是，如果我们的网页上的内容（基于数据库中的数据动态创建）跨越宽度大于窗口宽度的宽度，那么当滚动时，我们的横幅不再横跨文档的整个宽度。有人知道怎么修这个东西吗？横幅100％宽度延伸到窗口大小，但不是文档大小

一个简单的例子发布如下。蓝色是我们的“旗帜”，“红色”是我们的内容。

<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>

来源

2010-07-22 Scott K

试着将标题放在内容div中。就像这样：

... 
</head> 

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

</html>

更妙的是，加一个包装：

<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>

来源

2010-07-22 17:18:54

设置你的#header一个最小宽度等于#content宽度会做到这一点：

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

来源

2010-07-22 17:23:44 Pat

放

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

围绕一切...使包装position:relative，所以100％标题是包装的宽度，这将是无论内容是什么。

来源

2010-07-22 17:38:23 vinhboy

横幅100％宽度延伸到窗口大小，但不是文档大小

回答

相关问题