将一个div伸展到浏览器的边缘

我正试图通过标题'伸展'到用户浏览器的边缘来实现固定宽度居中布局。像这样...将一个div伸展到浏览器的边缘

Layout Example

任何想法如何，我可以做到这一点？

来源

2011-02-25 Accelebrate

如果您想从左到右进行元素拉伸，可以使用'margin：0; width：100％'，将元素放在右边'float：right'可以完成这项工作。 – pimvdb 2011-02-25 16:42:53

这工作出色。它可以使用一些改进，但这个想法是相当稳固的。

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>

来源

2011-02-25 17:12:29 thirtydot

适用于基于百分比宽度的容器，但固定宽度的容器又如何？ – roryf 2011-02-25 17:17:00

固定宽度的更新版本：http://jsfiddle.net/RXXzT/1/唯一需要注意的是h2.right的宽度也是固定的。 – roryf 2011-02-25 17:22:09

@ roryf：干杯，你的固定宽度版本看起来不错。 – thirtydot 2011-02-25 17:50:14

也许你可以使用幻觉来实现这一目标？您可以尝试让宽度为100％的蓝条位于所有页面内容的后面，使其仅显示在蓝色“副标题”部分的右侧，但始终位于右侧边缘。你只需要确保你消除剩下的部分（蓝色“子标题”元素左侧的任何东西）。

来源

2011-02-25 16:44:20

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

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

来源

2011-02-25 16:44:24 Sotiris

这对于定位div非常好，但我仍然需要定位文本，以便它在固定宽度区域内开始。由于浏览器将扩展和缩小，填充左侧将不起作用。 – Accelebrate 2011-02-25 16:58:07

另一个问题是，虽然主标题和绿色子标题将与顶部相距固定距离，但第二个蓝色标题的位置将取决于其上方的内容。 – Accelebrate 2011-02-25 17:03:18

也许这会工作？

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

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

来源

2011-02-25 16:52:17 Twoquestions

排序，但标题需要用浏览器扩展而不是固定宽度，文本需要位于固定宽度的内容区域内。 – Accelebrate 2011-02-25 17:10:43

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

否则，我不认为你想要什么是可能的使用纯CSS，但我可能会误会。

来源

2011-02-25 17:20:39 zdyn

将一个div伸展到浏览器的边缘

回答

相关问题