将div“‘Stretching”到浏览器的边缘

Question

我试图实现以固定宽度为中心的布局，标题“伸展”到用户浏览器的边缘。像这样..。

​

​

你知道我怎样才能做到这一点吗？

Answer 1

这个很好用。它可能需要一些改进，但它的想法是相当可靠的。

(edit)

CSS:

html, body {
    margin: 0;
    padding: 0;
    border: 0;
    overflow-x: hidden
}
body {
    background: #eee
}
#container {
    width: 80%;
    margin: 0 auto;
    background: #bbb;
}
#menu {
    overflow: auto
}
#menu li {
    float: left;
    width: 40px;
    margin: 5px;
    height: 24px;
    background: #fff
}
h1, h1 span, h2, h2 span {
    padding: 3px 0;
    height: 25px;
}
h1, h2 {
    position: relative;
    margin: 9px 0
}
h1 span, h2.left span {
    display: block;
    position: absolute;
    width: 100%;
    left: -100%;
    top: 0
}
h2.right span {
    display: block;
    position: absolute;
    width: 102%;
    left: 100%;
    top: 0
}

h1 {
    background: red;
    width: 80%
}
h1 span {
    background: blue /* blue for demonstration purposes */
}
h2.left {
    background: red;
    width: 30%;
    float: left
}
h2.left span {
    background: blue /* blue for demonstration purposes */
}
h2.right {
    background: red;
    width: 30%;
    float: right
}
h2.right span {
    background: blue /* blue for demonstration purposes */
}

#content {
    clear: both
}

HTML：

<div id="container">
    <h1><span></span>Heading</h1>
    <h2 class="left"><span></span>Sub-heading</h2>
    <h2 class="right">Sub-heading<span></span></h2>
    <div id="content">
        Hi!
    </div>
</div>

Answer 2

也许你可以使用幻觉来实现这一点？您可以尝试让宽度为100%的蓝色条位于所有页面内容的后面，这样它只显示在蓝色“副标题”部分的右侧，但始终到达右侧边缘。你只需要确保你遮住了它的其余部分(蓝色“副标题”元素左边的任何东西)。

Answer 3

如果你想在窗口中修复，你可以使用position:fixed，否则使用position:absolute。然后使用left:0和right:0，您可以将它们放在左侧或右侧。使用top可以设置距顶部的偏移。

演示：http://jsbin.com/awoke3