我确信这很简单,但是因为我在CSS工作并且需要一些帮助来慢跑我的大脑,所以这已经有几个了。我只是想创建一些部分(即),其中每个部分将具有不同的背景颜色,每个部分将延伸到浏览器窗口的边缘。我提供了一个基本方案如下:
<body>
<div class="header">
<header>
Header content.
</header>
</div>
<div class="nav">
<nav>
<ul>
<li>List</li>
<li>List</li>
<li>List</li>
</ul>
</nav>
</div>
<div class="content-blue">
<p>…content…</p>
</div>
<div class="content-red">
<p>...content...</p>
</div>
<div class="footer">
<footer>
Footer content.
</footer>
</div>
</body>
CSS:
* { margin: 0; padding: 0; }
body { background: yellow; }
div.header { background: orange; color: white; }
div.nav { background: pink; }
div.content-blue { background: blue; color: white; }
div.content-red { background: red; color: white; }
div.footer { background: gray; color: white; }
是的,我确实看过论坛并环顾四周,但我找不到任何特别相关的东西。也许我的问题太简单了。 :)
答案 0 :(得分:0)
只需添加一个
min-width: 100%;
到相关的divs
* { margin: 0; padding: 0; }
body { background: yellow; }
.header, .nav, .content-blue, .content-red, .footer {
min-width: 100%;
}
div.header { background: orange; color: white; }
div.nav { background: pink; }
div.content-blue { background: blue; color: white; }
div.content-red { background: red; color: white; }
div.footer { background: gray; color: white; }
&#13;
<div class="header">
<header>
Header content.
</header>
</div>
<div class="nav">
<nav>
<ul>
<li>List</li>
<li>List</li>
<li>List</li>
</ul>
</nav>
</div>
<div class="content-blue">
<p>…content…</p>
</div>
<div class="content-red">
<p>...content...</p>
</div>
<div class="footer">
<footer>
Footer content.
</footer>
</div>
&#13;
答案 1 :(得分:0)
除了去除身体上的填充物之外,你不需要做任何事情。
您只需要从身体上移除衬垫。
需要设置div的宽度,因为它们是块元素,因此它们将自动使用可用的宽度。
如果我使用您的代码制作代码段,则效果非常好(至少在Chrome中):
* { margin: 0; padding: 0; }
body { background: yellow; }
div.header { background: orange; color: white; }
div.nav { background: pink; }
div.content-blue { background: blue; color: white; }
div.content-red { background: red; color: white; }
div.footer { background: gray; color: white; }
&#13;
<body>
<div class="header">
<header>
Header content.
</header>
</div>
<div class="nav">
<nav>
<ul>
<li>List</li>
<li>List</li>
<li>List</li>
</ul>
</nav>
</div>
<div class="content-blue">
<p>…content…</p>
</div>
<div class="content-red">
<p>...content...</p>
</div>
<div class="footer">
<footer>
Footer content.
</footer>
</div>
</body>
&#13;