Question

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

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

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

HTML

    <!doctype html>
<title>Funfighter Alliance</title>
<body>
    <!--Header mit Navigation-->
    <div id="header">
        <header>
            <!--Logo + Logounterschrift-->
                <h1><a href="http://funfighteralliance.de"><img alt="Funfighter Alliance - Offizielle Projekt-Homepage" src="/include/designs/FFA/bilder/Logo-FFA.jpg"></a></h1>

            <p>Offizielle Projekt-Homepage</p>
            <!--Navigation-->
            <nav>
                 <h2 class="hidden">Navigation</h2>

                <ul>
                    <li><a href="index.php">Home</a>
                    </li>
                    <li><a href="">News</a>
                    </li>
                    <li><a href="">Teams</a>
                    </li>
                    <li><a href="">Forum</a>
                    </li>
                    <li><a href="">Kontakt</a>
                    </li>
                </ul>
            </nav>
        </header>
    </div>
    <!--Spacer mit Log-In-->
    <section id="spacer">
         <h2 class="hidden">Log-In</h2>

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

CSS

    /*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;
}

我该如何解决这个问题？

Answer 1

至少在JSFiddle中，问题似乎只是因为这一行而发生：

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

因为那里没有空格，浏览器希望将它们全部放在一行上，这会弄乱布局。

你可以看到它，因为如果你将word-break:break-all;添加到.login类，红色标题div会拉伸宽度的100％而右边没有空格，无论窗口大小如何的CSS。

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

.login {max-width：100％;溢出：隐藏; }

#header {min-width：100％;}

我意识到你提供的代码是一个例子，但它至少似乎解决了JSFiddle中的问题。希望这会有所帮助。

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

1 个答案: