Question

我希望孩子div宽度为身体的100％。

CSS

#container {
    position:relative;
    width:400px;
    height:100px;
    margin:0 auto;
    background:red;
}
#inner {
    width:100%;
    height:30px;
    background:blue;
}

HTML

<div id="container">
    <div id="inner"></div>
</div>

Here is the fiddle

我正在使用position:relative作为父div，而position:absolute;解决方案无效。我怎样才能做到这一点？ Js解决方案是可以接受的。

Answer 1

选中此fiddle

<强> CSS

body {
    margin-top:30px;
}
#container {
    width:400px;
    height:100px;
    margin:0 auto;
    background:red;
}
#inner {
    width:100%;
    height:20px;
    background:blue;
    position:absolute;
    right:0;
    left:0;
}

您只需从容器div中删除position:relative，一切都将按预期工作

和

我认为不需要为此编写JS，因为这可以使用CSS获得。

Answer 2

在html中，如果在使用％时在容器内部有元素，则它将遵循容器边界。

所以，不确定为什么Lal被投票。但他的解决方案有效。

特别是因为你的容器是相对的，绝对容器对容器是绝对的，而不是主体本身。你可以删除position：relative;在容器上，它将以这种方式工作，但这取决于你想做什么。

使内部div 100％宽度的身体

2 个答案: