Question

我们的网页上有一个iamge横幅，它是一个在x轴上重复的渐变。问题是，如果我们网页上的内容（基于我们数据库中的数据动态创建）的宽度大于窗口宽度，则滚动时我们的横幅不再跨越文档的整个宽度。任何人都知道如何解决这个问题？

下面张贴了一个简单的例子。蓝色是我们的“旗帜”，“红色”是我们的内容。

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

Answer 1

尝试将标头放在内容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>

Answer 2

在#header上设置等于#content宽度的最小宽度可以执行此操作：

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

Answer 3

放一个

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

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

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

3 个答案: