html - 突破容器div

Question

我有以下示例:http://jsfiddle.net/32qRC/

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

我还有一个类为 full 的 div，我想打破容器并填充浏览器窗口的宽度(请注意，我还有一个 40px 的 body margin 所有绕一圈)

我已经尝试使用左右边距 -100% 来完成它，这一半有效，但使 div 比我想要的宽得多。

简而言之，如果浏览器的宽度是 1280px，那么 full 应该变成 1200px 宽度(因为两边都是 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%;
}

Answer 1

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

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

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

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