Html 使用CSS制作扩展屏幕全宽的部分_Html_Css

Html 使用CSS制作扩展屏幕全宽的部分

html css

Html 使用CSS制作扩展屏幕全宽的部分,html,css,Html,Css,我相信这很简单，但我在CSS工作已经有几年了，需要一些帮助来锻炼我的大脑。我只想创建一些部分（即），每个部分都有不同的背景色，每个部分都会延伸到浏览器窗口的边缘。我提供了如下基本方案： <body> <div class="header"> <header> Header content. </header> </div> <div class="nav"> <nav

我相信这很简单，但我在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>

是的，我确实浏览了论坛，四处看看，但我找不到任何特别相关的东西。也许我的问题太简单了。：）

只需添加一个

min-width: 100%;

有关部门

*{margin:0；padding:0；}
正文{背景：黄色；}
.header、.nav、.content蓝色、.content红色、.footer{
最小宽度：100%；
}
div.header{背景：橙色；颜色：白色；}
div.nav{背景：粉红色；}
div.content-blue{背景：蓝色；颜色：白色；}
div.content-red{背景：红色；颜色：白色；}
div.footer{背景：灰色；颜色：白色；}


标题内容。

名单
名单
名单

…内容
…内容
页脚内容。

除了移除车身上的衬垫之外，您不需要做任何事情，您已经这样做了

你只需要去掉身体上的填充物

需要设置div的宽度，因为它们是块元素，所以它们将自动使用可用的宽度

如果我制作了一个包含您的代码的代码片段，那么它可以完美地工作（至少在Chrome中）：

*{margin:0；padding:0；}
正文{背景：黄色；}
div.header{背景：橙色；颜色：白色；}
div.nav{背景：粉红色；}
div.content-blue{背景：蓝色；颜色：白色；}
div.content-red{背景：红色；颜色：白色；}
div.footer{背景：灰色；颜色：白色；}


标题内容。

名单
名单
名单

…内容
…内容
页脚内容。

如果设置

div.nav{width:100%；}

？问题它可能受到身体的限制，身体也需要有100%的宽度。你有什么问题？你的计划似乎工作得很好。你只需要去掉身体上的填充物。无需设置div的宽度，因为它们是块元素，将自动使用可用的宽度。如果我用你的代码制作了一个代码片段，它就可以完美地工作（至少在Chrome中是这样）。对我来说，渲染的宽度是100%——这就是你想要的吗？我的想法是制作部分，每个部分都有不同的bgcolor/字体颜色。我会使用媒体查询/rwd让它在手机上崩溃。我只想在节（即div）之间没有空间，并使所有元素都扩展到浏览器窗口。Ok。取得了一些进展，但我在媒体查询方面遇到了一些问题。当屏幕在600px以下移动时，它不会切换到移动风格。有什么我遗漏的吗？也许我遗漏了什么。因此，当我插入由

min-width: 100%;