div不继承子div的大小

时间:2013-10-16 15:13:19

标签: html css

我正在尝试了解将应用程序从一个区域移动到另一个区域时遇到的问题。我以前在一个独立的测试应用程序中测试我的HTML,并且已经达到了我对它感到满意的阶段。所以我开始将它整合到正确的位置。当我这样做时,我发现我有一个好奇的CSS问题,因为div元素似乎不再继承子分裂的维度。

我创建了一个JSFiddle以展示问题,下面还提供了代码。

向后工作,具有高度和宽度(100px)硬编码的样式属性的最外层div似乎具有我期望的计算样式。

The leaf div with the explicitly styled height and width of 100px.

到目前为止快乐。我们可以看到100px的高度和宽度。

具有类 child 的div似乎也会继承子内容中的维度,正如我所料。我们看到100px的高度和宽度。

The child div inherits 100px from it's child content

到目前为止,正确的行为。

然而,这是我对CSS的知识落空的地方。类 parent 的div似乎从其内容中丢失了所有宽度和高度信息,因此用户在浏览器中看不到任何内容,因为这些div的大小基本上变为0px且内容被隐藏。

The computed width and height is 0px. This is not what was expected!

我的问题是,为什么不使用样式类从div元素的子元素继承宽度和高度。

HTML

<div class="grandparent">
    <div class="parent">
        <div class="child">
            <div style="height: 100px; width: 100px; background-color: black;">hello</div>
        </div>
    </div>
</div>

CSS

.grandparent {
    height: auto;
    position: absolute;
    margin: 0;
    overflow: auto;
    display: block;
    background-color: red;
}
.parent {
    position: relative;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    display: block;
    background-color: green;
}
.child {
    height: auto;
    position: absolute;
    margin: 0;
    overflow: auto;
    display: block;
    background-color: blue;
}

1 个答案:

答案 0 :(得分:2)

它的利弊但位置:绝对;在这种情况下是问题: http://jsfiddle.net/CyubA/1/

.child {
    height: auto;
    position: relative;
    margin: 0;
    overflow: auto;
    display: block;
    background-color: blue;
}