'将div扩展到浏览器的边缘 [英] 'Stretching' a div to the edge of a browser

问题描述

我想实现一个固定的宽度为中心的布局，标题'伸展'到用户浏览器的边缘。像这样...

<

解决方案

任何想法如何实现这一切。

现场演示 （编辑）

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用于演示目的* / 
} 
 h2.left {
 background：red; 
 width：30％; 
 float：left 
} 
 h2.left span {
 background：blue / * blue用于演示* / 
} 
 h2.right {
 background：red; 
 width：30％; 
 float：right 
} 
 h2.right span {
 background：blue / * blue用于演示* / 
} 
 
＃内容{
 clear：both 
} 
  

HTML：

 < div id =container> 
< h1>< span>< / span>标题< / h1> 
< h2 class =left>< span>< / span>副标题< / h2> 
< h2 class =right>副标题< span>< / span>< / h2> 
< div id =content> 
嗨！ 
< / div> 
< / div> 
  

I'm trying to achieve a fixed width centred layout with headings that 'stretch' to the edge of the users browser. Like this...

Any ideas how I can achieve this?

解决方案

This works splendidly. It could use some refinements, but the idea is quite solid.

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>

这篇关于'将div扩展到浏览器的边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！