Question

我有一篇960像素宽的博文。

我希望此博客文章的部分内容覆盖100％的视口（从左侧：0到右侧：0）。使用绝对定位相当容易，但使用这种方法无法清除这些100％宽的元素。

HTML：

<div class="wrapper">
    <h1>A header</h1>
    <p>Some content.</p>
    <div class="out">
        <blockquote>Some blockquote.<br/> Another line.<br/>And another.</blockquote>
    </div>
    <p>Clears don't work here and this content is invisible :( </p>
    <p>And this sucks :( </p>
    <div class="out">
        <blockquote>And different blockquote.<br/> Another line.<br/></blockquote>
    </div>
    <p>Also this is behind blockquote as well.</p>
</div>

CSS：

body {
    position: relative;
}

.wrapper {
    margin: 0 auto;
    padding: 15px;
    background: #eee;
    width: 400px;
    height: 1000px;
}

.out {
    position: absolute;
    right: 0;
    left: 0;
    padding: 15px;
    background: #aaa;
    width: 100%:
}

blockquote {
    margin: 0 auto;
    width: 400px;
}

这是一个演示：

http://jsfiddle.net/2rC2S/1/

注意：所有的块引用都有不同的高度，所以我无法为它们设置它。我不想使用JavaScript（因为它很容易获得元素高度，设置这个和繁荣，但谁用JS渲染内容？！）。

Answer 1

您可以通过使用伪选择器之前和之后执行此操作，如下所示

.out:before, .out:after {
     content:"";
     background: black;
     position: absolute;
     top: 0;
     bottom: 0;
     width: 9999px;
 }
 .out:before {
     right: 100%;
 }
 .out:after {
     left: 100%;
 }

http://jsfiddle.net/kM3Gf/

您可以在http://css-tricks.com/examples/FullBrowserWidthBars/

找到原创文章

我仍然不确定浏览器兼容性！

Answer 2

也许你可以避免为包装器设置宽度，而是为每个内容元素设置它？

绝对定位的元素不会占用文档中的空间，因此不会推送任何内容。

请参阅 DEMO

.wrapper h1, .wrapper p {
    margin: 0 auto;
    padding: 15px;
    background: #eee;
    width: 400px;
}

CSS - 缩小父级中的全宽元素？

2 个答案: