Question

我的html页面正文放在页面中间，如下所示：

<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元素指定的边框之外。怎么做到呢？在此先感谢您的帮助。

Answer 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>

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

Answer 2

你想要实现这样的目标吗？

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;
}

在居中的body元素中展开div元素

2 个答案: