我有這個div具有絕對定位，另一個位於內部的div具有width：100％。 為什么不填滿其父母？

Question

我有一個div，它和窗口一樣高，大約是窗口的4倍（它被其中的元素水平拉伸）。

然后是其中的另一個<div> ，該width:100%應該是其父級的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>