Question

我正在制作一个模板，该模板需要元素（h2，h3等）的背景图像延伸到（居中）页面宽度以填充浏览器窗口。

我知道这样做的方法。我见过克雷格·巴克勒在这里解释的这个解决方案： http://www.sitepoint.com/css-extend-full-width-bars/

你可以在这里看到一个小提琴： http://jsfiddle.net/Vinyl/V8ps3/

基本上，我们添加了大量填充，然后将元素移回原始位置

我认为这是一个很好的解决方案，但你知道另一个解决方案吗？

html：

<div id="main">
    <div>lorem ipsum</div>
    <div id="content">content which extend beyond the (centered) page width to fill the browser window</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nunc erat, at ornare nisl sollicitudin eget. Vestibulum aliquam massa sit amet fringilla ullamcorper. Curabitur libero arcu, suscipit eu convallis eget, sodales id ante. Vestibulum gravida massa vitae risus molestie egestas. Nullam mi elit, tempus nec eleifend non, vestibulum ac magna. Integer tortor diam, dapibus eu faucibus nec, ornare in ipsum.</div>
</div>

css：

body {
    margin:0;
    overflow-x: hidden;
    background-color: #333333;
}
#main {
    width:250px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
}
#content {
    background-color: #999999;
    padding: 20px;
    width: 100%;
    margin: 0 auto;
    margin-right: -3000px;
    padding-right: 3000px;
    margin-left: -3000px;
    padding-left: 3000px;
}

Answer 1

DEMO ..

这是另一个解决方案......可能更简单，它使用:before元素（h2，h3等）

CSS

#content {
    padding: 20px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

#content:before {
    background: #999999;
    content: "";
    width: 1000%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -500%;
    z-index: -1;
}

希望这会对你有帮助..

如何使用CSS将包装元素扩展到完整的浏览器宽度？

1 个答案:

CSS