Html 放大时如何在整个宽度上显示背景色？

我想在浏览器窗口的整个宽度上显示标题元素的背景色

出现以下问题：如果用户放大或缩小浏览器窗口的大小，并且当垂直滚动条出现时，页眉的背景色不会显示在页面的整个宽度上，它将在“我的页眉”类的末尾结束

在这里，您可以看到我的代码和问题：

HTML

---

如何解决此问题？

至少在JSFIDLE中，问题似乎正是因为这一行而发生的：

<div class="login">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

因为其中没有空格，浏览器希望将所有空格都放在一行上，这会弄乱布局

您可以看到它，因为如果添加

word break:break all，则无论窗口大小，红色标题div都会延伸100%的宽度，右侧没有空白

到

.login

类css

尝试将此添加到现有CSS中，看看是否有助于解决问题：

.login{最大宽度：100%；溢出：隐藏；}

#标题{最小宽度：100%；}

---

我知道您提供的代码是一个示例，但它至少似乎解决了JSFIDLE中的问题。希望这能有所帮助。

请将代码放入问题中。感谢您提供的信息，完成。然后取消重置。不管怎样，JSFiddle都会使用它，我们不需要看到它。希望我的帖子现在一切顺利。

    /*Allgemeine Formatierungen für Elemente*/
 body {
    background:url(/include/designs/FFA/bilder/bg.png) repeat;
    font-family:'Open Sans', sans-serif;
    color:#272934;
    overflow-y: scroll;
    border-top: 5px solid #009cff
}
p {
    margin: 5px 0;
    line-height:25px;
}
a {
    text-decoration:none;
    color:inherit;
    transition:color .5s ease;
}
strong {
    font-weight:bold;
}
img {
    height:auto;
    max-width:100%;
}
.hidden {
    position:absolute;
    clip: rect(1px 1px 1px 1px);
    /* IE6 & 7 */
    clip: rect(1px, 1px, 1px, 1px);
}
/*Spezielle Formatierungen für Klassen, Sektionen und Elemente*/

/*Header*/
 #header {
    background: red;
    width:auto;
}
header {
    position:relative;
    width:auto;
    max-width:1200px;
    margin: 0 auto 20px auto;
}
header h1 {
    margin: 35px 0 0 0;
}
header p {
    font-family:'Open Sans', sans-serif;
    font-size:16px;
    color:#6c6c6c;
    margin-left:74px;
}
/*Navigation*/
 nav {
    bottom: 0;
    position: absolute;
    right: 0;
}
nav ul li {
    display: block;
    float: left;
    padding: 3px 15px;
}

<div class="login">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>