Css div正在获取非直接父级的高度

我现在面对的是一只奇怪的铬合金海狸

代码如下：

HTML

<div id="contacts">
    <div class="ui segment contacts-header"></div>
        <div class="contacts-content">
            <div class="table-wrapper">
                <div class="table-header"></div>
                <div class="table-inner-wrapper">
                    <table class="ui padded unstackable table">
                        <thead>
                            <tr>
                                <th class="five wide">
                                    <div class="th-inner first username">Name</div>
                                </th>
                                <th class="one wide">
                                    <div class="th-inner"><i class="star icon"></i></div>
                                </th>
                                <th>
                                    <div class="th-inner">Status</div>
                                </th>
                                <th class="three wide">
                                    <div class="th-inner">Lists</div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

问题是div

.table wrapper

继承了

#contacts

div的高度，而不是其直接父级

.contacts content

的高度

这会破坏我的布局，因为我正在使用

overflow-y:auto

在

.table inner wrapper

中，当然滚动条永远不会显示，因为

.table wrapper

div的高度不好

让我来告诉你区别：

铬合金（手推车）

火狐

现在，为了显示weir的行为，这里是在Chrome屏幕上显示div的大小：

• 。联系人

  ：388px

• 。联系人标题

  ：167px

• 。联系人内容

  ：221px

• 。表格包装器

  ：388px

• 。表格内部包装器

  ：348px

因此，

.table wrapper

的高度应该是：388-167=221px 当我手动设置这个高度时，我通过滚动条获得了预期的视觉效果

注意：为了记录，这里的代码是一个带有纯css粘性标题的表。我接着说：

谢谢

威廉

经过认真的挖掘（不是开玩笑），我找到了答案。 这是一个chrome错误，详情如下：

上一篇文章给了我一个线索：

我不会在这里给出代码，因为rinick对github问题的解释非常清楚

在我的例子中，我使用以下css在

.table wrapper

之前创建了一个新的包装器：

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

---

不能在CSS中嵌套元素。是不是少了？是的，我会在主题中提到它，但在这里它真的不重要。它只是避免了混淆。

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;