我想在浏览器窗口的整个宽度上显示标题元素的背景色。
出现以下问题:如果用户放大或缩小浏览器窗口的大小，当垂直滚动条出现时，页眉的背景色没有显示在页面的整个宽度上，它结束于我的标题类结束。
在这里你可以看到我的代码和问题:
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;
}
我该如何解决这个问题？
最佳答案
至少在 JSFiddle 中，问题似乎只是因为这一行而发生:
<div class="login">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
因为那里没有空格，浏览器希望将所有内容放在一行中，这会打乱布局。
你可以看到它，因为红色标题 div 拉伸(stretch) 100% 的宽度，右边没有空白，无论窗口大小，如果你添加 word-break:break-all; 到 .login 类 css。
尝试将它添加到您现有的 CSS 中，看看它是否有助于解决问题:
.login {max-width: 100%; overflow: hidden; }
#header {min-width: 100%;}
我知道您提供的代码只是一个示例，但它至少似乎解决了 JSFiddle 中的问题。希望这会有所帮助。
关于html - 放大时如何在整个宽度上显示背景颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20926526/