1

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

我创建了一个JSFiddle来演示这个问题，下面还提供了代码。

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

具有明确样式的高度和宽度为 100 像素的叶子 div。

快乐至今。我们可以看到 100px 的高度和宽度。

正如我所料，带有子类的 div似乎也继承了子内容的尺寸。我们看到 100px 的高度和宽度。

子 div 从它的子内容继承 100px

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

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

计算的宽度和高度为 0px。 这不是预期的！

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

1 回答 1

2

它的利弊，但立场：绝对；在这种情况下是问题：http: //jsfiddle.net/CyubA/1/

.child {
    height: auto;
    position: relative;
    margin: 0;
    overflow: auto;
    display: block;
    background-color: blue;
}
于 2013-10-16T15:15:53.397 回答