div 不继承子 div 的大小答案

【问题标题】：div not inheriting size of child divdiv 不继承子 div 的大小
【发布时间】：2013-10-24 18:55:09
【问题描述】：

我试图了解将我的应用程序从一个区域移动到另一个区域时所面临的问题。我之前在一个独立的测试应用程序中测试了我的 HTML，并且已经达到了我对它感到满意的阶段。所以我开始把它整合到正确的地方。执行此操作时，我发现我遇到了一个奇怪的 CSS 问题，因为 div 元素似乎不再继承子分隔符的尺寸。

为了演示问题，我创建了JSFiddle，下面也提供了代码。

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

到目前为止很开心。我们可以看到 100px 的高度和宽度。

类 child 的 div 似乎也继承了子内容的尺寸，正如我所料。我们看到高度和宽度都是 100 像素。

到目前为止，行为正确。

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

我的问题是，为什么宽度和高度没有从具有 parent 样式类的 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;
}

【问题讨论】：

标签： html css

【解决方案1】：

它的优点和缺点，但位置：绝对;在这种情况下是问题： http://jsfiddle.net/CyubA/1/

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

【讨论】：

感谢您的快速回复！这正是我所需要的。