Question

我正在尝试在display: table的父级内实现内部div的自动适合高度。这是我的标记：

<!DOCTYPE html>
<html>

<body>

<div id="container">
    <div id="content">
        <div id="category">
            <div class="row">
                <div class="item">TEST</div>
            </div>

            <div class="row">
                <div class="item">TEST</div>
            </div>

            <div class="row">
                <div class="item">TEST</div>
            </div>
        </div>
    </div>
</div>

</body>

</html>

CSS：

* { 
    margin: 0;
    padding: 0;
}

html, body { 
    height: 100%;
}

#container {
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    height: 100%;
    width: 100%;
}

#content {
    display: table-row;
    height: 100%;
}

#category {
    display: table;
    height: 100%;
    width: 100%;
}

.row {
    display: table-row;
    vertical-align: top;
    width: 100%;
}

.item {
    float: left;
    width: 300px;
    height: 100%;
    background-color: #FF0000;
}

在此示例中，有三行在页面上均匀分布。在这些行中有一些名为.item的内部div。这些div需要自动适应其父.row的高度。

这适用于Chrome和IE，但不适用于Firefox。我在Firefox中使用此功能的唯一方法是，如果我将.item设为display: table - 但我不想这样做是因为我使用的插件无法正常工作那个。

有什么理由不在Firefox中工作吗？这是一个错误还是我做错了什么？

编辑：刚刚创建了一个小提琴来演示：http://jsfiddle.net/wqw59/1/（在Firefox和Chrome中试试这个）

编辑：我需要保留主容器标记和结构，因为这是整个网站的骨架。

Answer 1

不确定这是否对您有所帮助，但以下链接显示，在将某些类型的位置样式（我在书中包含高度和宽度）应用于表时，firefox中会发生一些奇怪的事情。虽然您实际上并未使用表，但由于您的显示设置为表，因此它可能会执行相同的操作。 firefox position absolute inside a relative container issue

它帮了我很多。需要考虑的是尝试在没有显示编辑的情况下放置一个跨度，并为其提供所需的宽度和高度。

有些东西告诉我，即使问题不同，它们与定位问题有关，因为你的问题类似于我的问题，并且通过改变它来修复。

Answer 2

这三个项目具有相同的宽度和高度，文本在中间垂直和水平居中，元素在屏幕上调整大小。

家长水平： Demo here 或父级垂直： Demo here

Css：

#category {
    padding: 10px;
    background: #DDD;
}
.row {
    position: relative;
    float: left;
    width: 33.3333%
}
.item {
    position: absolute;
    background: #FFF;
    top: 10px;
    right: 10px;
    left: 10px;
    bottom: 10px;
    text-align: center;
}
.item div {
    display: table;
    width: 100%;
    height: 100%;
}
.item span {
    display: table-cell;
    vertical-align: middle;
}
.height {
    vmargin-top: 100%;
}
.clear {
    clear: both;
}

<强>更新

http://jsfiddle.net/BAnU6/2/

父容器的自动调整高度（显示表）

2 个答案: