Question

我有一个与窗口一样高的div，宽度约为4倍（它内部的元素水平拉伸）。

然后在其中的另一个<div>，它应该和它的父width:100%一样宽（它是背景图片）。

但是，子<div>仅与窗口一样宽，并且不完全填充其父级。这种情况发生在我尝试的所有浏览器中。

为什么会这样，我该如何解决？

来源：

<style>
.parent
{
width:100%;
height:100%;
overflow-x:scroll;
overflow-y:hidden;
position:absolute;
top:0;
left:0;
background-color:#999;
}

.child
{
width:100%;
height:200px;
position:absolute;
bottom:0;
left:0;
background-color:#000;
color:#fff;
}

.stretcher
{
width:10000px;
height:32px;
position:absolute;
}
</style>

<div class="parent">
  <div class="child">this should stretch as much as its parent !</div>
  <div class="stretcher">this is some content that defines the page's width</div>
</div>

JSFiddle

Answer 1

.stretcher div不会扩展父级，因为position: absolute将元素从页面流中取出，因此其宽度对父级没有影响。孩子表现得很好并且扩展到父母的宽度。如果您使用Firebug或类似的东西，您可以清楚地看到这一点。

至于如何解决它，不确定你要用担架div完成什么，以及为什么你不给父母宽度。也许你可以对你试图用这种结构做些什么进行扩展。

Answer 2

也许外面的<div>应该相对定位。内部<div>可以是绝对的，但您可能想尝试添加right:0px;以及您已有的left:0px。除非没有其他办法，否则我会避免绝对定位。

Answer 3

我不确定为什么孩子<div>没有填充父母，但为了让它工作，你需要将.stretcher <div>包裹在父母和父母身边。孩子<div>。

来源：

    <style>
        .parent {
            width:100%;
            height:100%;
            overflow-x:scroll;
            overflow-y:hidden;
            position:absolute;
            top:0;
            left:0;
            background-color:#999;
            }

        .child {
            width:100%;
            height:200px;
            position:absolute;
            bottom:0;
            background-color:#000;
            color:#fff;
            }

        .stretcher {
            width:10000px;
            height:100%;
            position:absolute;
            }

    <div class="stretcher">
        <div class="parent"><p>this is some content that defines the page's width</p>
            <div class="child">this should stretch as much as its parent !</div>
        </div>
    </div>

我有这个div与绝对定位和另一个定位div内部宽度：100％。为什么不填补其父母？

3 个答案: