使用CSS制作扩展屏幕整个宽度的部分

时间:2015-04-23 18:00:42

标签: html css

我确信这很简单,但是因为我在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; }

是的,我确实看过论坛并环顾四周,但我找不到任何特别相关的东西。也许我的问题太简单了。 :)

2 个答案:

答案 0 :(得分:0)

只需添加一个

min-width: 100%;

到相关的divs

&#13;
&#13;
* { 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;
&#13;
&#13;

答案 1 :(得分:0)

除了去除身体上的填充物之外,你不需要做任何事情。

您只需要从身体上移除衬垫。

需要设置div的宽度,因为它们是块元素,因此它们将自动使用可用的宽度。

如果我使用您的代码制作代码段,则效果非常好(至少在Chrome中):

&#13;
&#13;
* { 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;
&#13;
&#13;