Question

我需要ID为div的{{1}}与#my-div的宽度相同，ID为div，只需使用css：

HTML

#wrapper

我试过这个css

<div  id="wrapper"> <!-- width is 100% of the browser -->
    <div  id="content"> <!-- width is 940px -->
        <div  id="my-div"></div> <!-- width should be 100% of the brower -->
    </div>      
</div>

但没有工作。

Answer 1

我知道这一点的唯一方法就是将#my-div从absolute位置移出流程，但这会对#content的内容产生影响：

＆＃13;

* {margin:0}
html,body {height:100%;}
#wrapper {
  height:100%;
  background:#eee;
  position:relative;
}
#content {
  width:50%;
  margin:auto;
  height:50%;
  background:red;
}
#my-div {
  height:20%;
  background:orange;
  position:absolute;
  width:100%;
  left:0;
  top:10%;
}

＆＃13;

<div  id="wrapper"> <!-- width is 100% of the browser -->
    <div  id="content"> <!-- width is 940px -->
        <div  id="my-div"></div> <!-- width should be 100% of the brower -->
    </div>      
</div>

＆＃13;

现在这解决了这种情况，但也许并不是实现目标的最佳方法....你可以尝试更好地解释，也许我可以为你提供另一种解决方案。

Answer 2

尝试给出我的div位置：绝对

    #my-div
    {
            width:100%;
            height:20px;
            min-width:600px;
            background-color:red;
            position:absolute;
            left:0;
            right:0;
     }

Answer 3

我想这样做的唯一方法就是给＃my-div div一个position:absolute。

CSS：

#wrapper {
width:100%;
position:relative;
}

#content {
width:940px;
margin:0 auto;
}

#my-div {
position:absolute;
left:0;
right:0;

}

但这会将div从流程中移除，这意味着其他元素不会被调整注意到这个div，因此可能需要重新定位，因此元素不会在绝对定位的元素下面流动。

请务必不要将position:relative放入#content div，否则绝对div将位于其父级的左侧。

请参阅小提琴http://jsfiddle.net/djsyxkzz/以获取示例

Answer 4

你必须使用负边距使其比它的父母更大。你不能使用百分比（至少据我所知）。是否有一个特定的原因，你想要一个固定大小的div 100％宽的东西？

#my-div{margin:0px -3000px;}

我需要给一个div与它的parent.parent div相同的宽度与css

4 个答案: