突破容器 div答案

【问题标题】：Break out of container div突破容器 div
【发布时间】：2013-11-20 00:20:04
【问题描述】：

我有一个 960px 宽容器和其中包含的两个段落。

我还有一个类为 full 的 div，我想打破容器并填充浏览器窗口的宽度（请注意，我也有一个 40px 的正文边距）

我尝试过使用左右边距-100% 来实现它，其中一半有效，但使 div 比我想要的宽得多。

简而言之，如果浏览器是1280pxwide，那么full应该变成1200pxwide（因为两边都是40px）

有什么想法吗？

HTML：

<div class="container">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    <div class="full"></div>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

</div>

CSS：

*
{
    margin: 0;
    padding: 0;
}

body
{
    margin: 40px;
}
.container
{
    width: 960px;
    margin: 0 auto;
    background: yellow;
}
.full
{
    background: red;
    height: 320px;
    margin: 40px 0;
    margin-left: -100%;
    margin-right: -100%;
}

【问题讨论】：

标签： html css

【解决方案1】：

您不能拆分父元素以使子元素全屏显示。

最好的方法是关闭内容<div>，启动.full div，然后重新启动内容，如下：http://jsfiddle.net/LKGwv/1/embedded/result/

.full
{
    background: red;
    height: 320px;
    margin: 40px 0;
    width:100%;
}

position:absolute 会破坏您的布局并使您的 div “浮动”在内容中的其他元素之上。

【讨论】：

事实证明，我实际上可以为此编辑 HTML，因此可以正常工作。在以前版本的代码中，这是不可能的，因此需要负边距等。谢谢。

【解决方案2】：

定位.full绝对，所以它不会与它的父级有关系，而是与窗口有关系。我不知道您是否要保留 40px 边距。如果您想将left 和right 都更改为40px。

.full
{
    background: red;
    height: 320px;
    left: 0;
    right: 0;
    position: absolute;
}

检查updated Fiddle 和fullscreen view。

【讨论】：

它现在与第二段重叠。