Question

我试图了解stackoverflow如何在顶部创建黑条，这样无论我放大多少，当我向右滚动时它都会填满页面。这是一个测试，放大约200％，然后一直向右滚动，黑条保持没有问题。

转到vvv-gaming.com并以相同的方式缩放然后向右滚动，您会注意到红色导航栏停止。我无法弄清楚stackoverflow上有什么不同，使它以这种方式运行。

我已经离开并从stackoverflow复制了html和css，他们的代码仍然像我一样。这是：

<html>
<head>
    <style>
        .topbar {
            width:100%;
            height:45px;
            background: rgba(0,0,0,0.86);
            line-height: 1;
            text-align: center;
            display: block;
            color: white;
        }
        .topbar-wrapper{
            width: 980px;
            margin:0 auto;
            height: 34px;
            text-align: left;
            position: relative;
            vertical-align: baseline;
            display: block;
        }
        .network-items{
            display: inline-block;
            vertical-align: top;
        }
    </style>
</head>
<body>
    <div class="topbar">
        <div class="topbar-wrapper">
            <div class="network-items">
                Some random text here
            </div>
        </div>
    </div>
</body>

继续缩小该页面然后向右滚动，你会发现黑条停止填充，我该如何防止这种情况？

Answer 1

您也可以创建它。您只需要这个CSS：

.header {
    width:100%;
    height:30px;
    background-color: Black;
}

并创建以下html：

<div class="header"> <div>

在此处查看 - ＆gt; http://jsfiddle.net/jZXCc/2/

希望这有帮助!!!

Answer 2

这是一个CSS技巧。宽度设置为100％。

<div id="header">
    <div class="wrap">
        <div class="logo">
            <a href="#"><img src="images/yourlogo.png"></a>
        </div>
        <p>Other content for your header</p>
    </div>
</div>

#header {
    width:100%;
    float:left;
}

.wrap {
    position:relative;
    margin:0 auto;
    /*replace 900px with your width*/
    width:900px;
}

Answer 3

它的宽度设置为100％，我认为这是差异。

如果您正在使用Chrome（或具有相同设置的其他内容），您只需右键单击并转到＆＃34; Inspect Element＆＃34;在将来看到应用于页面上的div或其他元素的所有格式。它可能会在某个时候变得复杂，但这将回答你的很多问题。

Answer 4

问题是内部div（设置条形宽度的那个）没有着色。发生了什么，颜色来自根div，当根div小于导航时，通过放大，不再绘制颜色。解决方案是为内部div和顶部div着色。

<html>
<head>
    <style>
        .topbar {
            width:100%;
            background: rgba(0,0,0,0.86);
            text-align: center;
            display: block;
            color: white;
        }
        .topbar-wrapper{
            width: 980px;
            background: rgba(0,0,0,0.86);
            margin:0 auto;
            text-align: left;
            position: relative;
            display: block;
        }
        .network-items{
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="topbar">
        <div class="topbar-wrapper">
            <div class="network-items">
                Some random text here
            </div>
        </div>
    </div>
</body>

放大停止着色的div

4 个答案: