Question

我有这样的设计： alt text http://img15.imageshack.us/img15/8647/designiq.jpg

我所有以自动为中心的内容都有以下CSS：

width: 960px;
margin: 0px auto;

在此自动居中内容中，是一个DIV元素，其宽度应为浏览器的完整宽度。

制作100％-DIV的最佳解决方案是什么？

position: absolute /* or fixed */不是我想要的，因为100％-DIV以上的内容高度不是每次都相同。

Answer 1

以下是代码示例：

<html>
<head>
<title>Boxes</title>

<style type="text/css">
<!--

body {
    margin: 0;
    padding: 0;
}
* {
    margin: 0;
    padding: 0;
}

#wrapper {
    width: 100%;
    margin: 0 auto;
}
#wrapper div.width_960 {
    width: 960px;
    margin: 0 auto;
    border-left: 2px #000 solid;
    border-right: 2px #000 solid;
}
#wrapper div.width_full {
    width: 100%;
    background: #000;
}   

-->
</style>
</head>
<body>

<div id="wrapper">
    <div class="width_960">
        <p>demo</p>
        <p>demo</p>
        <p>demo</p>
        <p>demo</p>
        <p>demo</p>
    </div>
    <div class="width_full">
        <p>demo full</p>
        <p>demo full</p>
    </div>
    <div class="width_960">
        <p>demo</p>
        <p>demo</p>
        <p>demo</p>
        <p>demo</p>
        <p>demo</p>
    </div>
</div>

</body>
</html>

Answer 2

在CSS中设置宽度是单向的;你会立即丢失父母宽度的信息。

简而言之：你不能使用 CSS 将约束div中的div重新设置为窗口的宽度。使用JavaScript，并假设父级没有overflow:hidden，您可以这样做：

将子宽度设置为window.innerWidth和
将孩子的左右边距设置为 - （window.innerWidth / 2 - parentDivs_width）

喜欢，例如窗口大小为800px：

#parent {
  width: 300px;
  margin: 0 auto;
}

#child {
  /* set these with JS */
  width: 800px;
  margin: 0 -250px;
}

更简单的解决方案是将子div移出其父级并将其置于父级并且具有负顶部和底部边距。（position:absolute不起作用，因为它是相同的，你会丢失有关宽度的信息。）

Answer 3

这是一个讨厌的丑陋技巧，但here是一种方式，没有任何Javascript。

基本上，您可以制作一个单独的绝对定位背景元素，其大小可以覆盖任何可能的窗口。

编辑：已修复以处理多行。

div.FullWidth {
  position:relative;
}
div.FullWidth .Background{
  position: absolute;
  left:-2048px;
  z-index:-1;
  width: 4096px;
  height:100%;

  background:#999;
}
div.FullWidth .Content {
  text-align: center;
  font-size:larger;
  color: red;
}



<div class="FullWidth">
  <div class="Background">&nbsp;</div>
  <div class="Content">
    Hello!</div>
</div>

Answer 4

你的元素不能比它的父元素宽。你必须把它排除在外。 position:absolute似乎是答案，如果你没有指定顶部位置，它将在流程中占据它的位置。

position:absolute;
width:100%;
left:0px;

带有CSS的自动中心，但有一个例外

4 个答案: