Css 放大将停止对div着色_Css

Css 放大将停止对div着色

css

Css 放大将停止对div着色,css,Css,我试图理解stackoverflow是如何在顶部创建黑色条的，这样无论我放大多少，当我向右滚动时，它都会填满页面。这是一个测试，放大大约200%，然后一直向右滚动，黑条保持不变转到vvv-gaming.com，以同样的方式缩放，然后向右滚动，您会注意到红色导航栏停止。我不知道stackoverflow的不同之处是什么，这使得它的行为如此时尚我已经从stackoverflow复制了html和css，它们的代码仍然和我的一样。这是： <html> <head> &

我试图理解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>

继续放大该页面，然后向右滚动，您会注意到黑色条停止填充，如何防止这种情况发生？

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

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

并创建以下html：

<div class="header"> <div>

请看这里->

希望这有帮助

这是一个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;
}

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

如果您正在使用Chrome或其他具有相同设置的工具，您只需右键单击并在将来检查元素，即可查看应用于div或页面上其他元素的所有格式。有时它可能会变得复杂，但这将回答您的许多问题。

问题是，设置条宽的内部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>

是的，我已经这样做了，我也试着设置100%的宽度，但它从来没有任何区别。我也一直在检查元素，但我无法找出差异。谢谢你，我今晚会尝试一下，让你知道它是如何进行的。我尝试过，它的行为与我的代码完全一样，当你放大并向右滚动时，背景色停止。你的解决方案会将框向左移动。我需要的内容保持居中，而不是缩小浏览器的大小。谢谢你的努力。