将 div '拉伸'到浏览器的边缘答案

【问题标题】：'Stretching' a div to the edge of a browser将 div '拉伸'到浏览器的边缘
【发布时间】：2011-10-18 06:44:17
【问题描述】：

我正在尝试使用“延伸”到用户浏览器边缘的标题来实现固定宽度的居中布局。像这样……

有什么想法可以实现这一点吗？

【问题讨论】：

如果你想让一个元素从左到右伸展，你可以使用margin:0;width:100%，将一个元素放在右边float:right就可以了。

标签： javascript css layout html

【解决方案1】：

这很好用。它可以进行一些改进，但这个想法非常可靠。

Live Demo (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>

【讨论】：

非常适合基于百分比宽度的容器，但固定宽度的容器呢？
固定宽度的更新版本：jsfiddle.net/RXXzT/1 唯一需要注意的是 h2.right 也必须是固定宽度。
@roryf：为此干杯，您的固定宽度版本看起来不错。
刚刚成功实施，再次感谢。我唯一的改变是将溢出：隐藏更改为溢出-x：隐藏。
是的，这听起来像是允许向下滚动的明智更改。我很高兴知道它对你有用。

【解决方案2】：

也许您可以使用幻觉来完成此操作？您可以尝试在所有页面内容后面放置一个宽度 = 100% 的蓝色条，这样它只暴露在蓝色“副标题”部分的右侧，但始终到达右边缘。您只需确保遮盖其余部分（蓝色“副标题”元素左侧的任何内容）。

【讨论】：

【解决方案3】：

如果你想固定在窗口中，你可以使用position:fixed，否则使用position:absolute。然后使用left:0 和right:0 将它们定位在左侧或右侧。使用top 可以设置从顶部开始的偏移量。

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

【讨论】：

这对于定位 div 非常有用，但我仍然需要定位文本，使其在固定宽度区域内开始。 Padding-left 不起作用，因为浏览器会扩大和缩小。
另一个问题是，虽然主标题和绿色副标题与顶部的距离是固定的，但第二个蓝色标题的位置取决于它上面的内容。

【解决方案4】：

也许这行得通？

<h1 id="mainHeader">Heading</h1>

#mainHeader {
    float:left;
    clear:both;
    width:800px;
    background-color:#ff0000;
    color:#fff;
}

【讨论】：

有点，但是标题需要随着浏览器扩展而不是固定宽度，并且文本需要位于固定宽度的内容区域内。

【解决方案5】：

这是我使用 JavaScript 的尝试，保持固定宽度的中心：Demo

否则，我认为使用纯 CSS 无法实现您想要的，但我可能会弄错。

【讨论】：