0

我的html页面的body放在页面中间,如下图:

<body style="margin:0 auto; width:75%">

现在我想放一个带有背景颜色的条带,沿着屏幕的整个宽度展开,就像这样。

<body style="margin:0 auto; width:75%">
<div style=" margin-left:0; margin-right:0;width:100%; height:20px; background- color:
#e6e3e3;"></div>
</body>

但是,这是行不通的。div 元素不会超出 body 元素指定的边界。如何做呢?在此先感谢您的帮助。

4

2 回答 2

1

除非您想使用 javascript 来查找窗口的宽度并以编程方式设置 div 的宽度,否则您最好的选择是将页面结构调整为:

<html>
  <body>
    <div style="margin:0, width:100%, padding:0"></div>
    <div class="content" style="margin:0 auto, width:75%"></div>
  </body>
</html>

因此,不是使整个 body 元素居中,而是有一个居中的“内容”div。这将允许您将某些元素放在内容 div 之外,它们可以是整个窗口的宽度。

于 2012-09-21T12:29:18.903 回答
1

你想达到这样的目标吗?

http://jsfiddle.net/TZ9Y7/

CSS:

html, body {
    height: 100%;
}

body{ margin:0 12.5%; border: 2px solid black; }

.div1 { 
    width: 100%;
    height: 30px;
    background: #ccc;
}

.div2 { 
    width: 100%;
    height: 30px;
    background: red;
    position: absolute;
    left: 0;
}

​</p>

于 2012-09-21T12:40:09.063 回答