如何让表格单元格内的div高度为“100%”

Question

我有一个使用表格单元的布局。我知道，使用表格已经过时了，但我需要它来使每一行的高度相同，而不使用绝对值来设置它们的高度。

请参见this fiddle或this draft。

我需要

正确显示.infobox在火狐浏览器中。在那之前，我将.infobox设置为100%的高度(使用绝对定位)，这在chrome上运行得很好，因为父级元素有position:relative。

我希望鼠标悬停效果应用于整个表格单元，但我很绝望地想弄清楚如何实现。我只想使用相对值(如em或%)来设置高度和宽度，使布局具有响应/流动性。

编辑: 好的，使用@OneTrickPony的想法，我尝试将它们包装在另一个"table-row"div中。那么现在我该如何使两个"table-cell"div具有相同的高度，并且有一种类似于vertical-align: middle但不需要为"table-row"div指定绝对高度的方法？

- rob_st

---

为什么不将悬停效果应用于 td:hover？ - nice ass

因为渐变应该在图像的上方。如果我将其应用于表格单元格，图像将位于表格单元格的背景之上。@OneTrickPony - rob_st

这就是为什么我在表格单元格内使用了一个包装 DIV。但我会尝试将其包装在另一个 div 中，而不是表格行中。 - rob_st

可能是重复的问题：如何使 DIV 充满整个表格单元格？ - vsync

Answer 1

还有另一种选择，但是它是否适合您的项目取决于您想支持哪些浏览器。

http://caniuse.com/#search=flexbox

我已经简化了你的标记，并完全删除了表格。

<div id="pictures">
    <article class="entry picture">
        <div class="entry picture">
            <img class="picture" src="./images/150x150.jpg" width="150" height="150"></img>
        </div>
        <div class="entry picture infobox">
            <a href="#" class="entry">
                <h3 class="entry picture headline">contents_0 alpha headline</h3>
                <div class="view picture">
                    <span class="comments_amount">5</span>
                    <span class="articlenk info">Bild zeigen</span>
                </div>
            </a>
        </div>
    </article>

    <article class="entry picture"><div class="picture wrapper">
        <div class="entry picture">
            <img class="picture" src="./images/150x71.jpg" width="150" height="71"></img>
        </div>
        <div class="entry picture infobox">
            <a href="#" class="entry">
                <h3 class="entry picture headline">contents_0 beta headline</h3>
                <div class="view picture">
                    <span class="comments_amount">5</span>
                    <span class="pictures info">Bild zeigen</span>
                </div>
            </a>
        </div></div>
    </article>
</table>

这个的CSS非常简单，但我省略了前缀：

div#pictures {
    display: flex;
    flex-flow: row wrap;
}

article {
    flex: 1 1 50%;
    box-sizing: border-box; /* optional */
    position: relative;
}

div.infobox {
    position: absolute;
    bottom: 0;
}

http://jsfiddle.net/NDMTH/1/

在这里，Figure/figcaption可能比article更合适。

- cimmanon

---

谢谢，这是个有趣的东西。不过我想要更广泛的浏览器支持。 - rob_st

Answer 2

好的，我发现实际上没有办法在不定义绝对值的情况下将两个（或更多）div的高度设置为相等的值。作为一种解决方法，我编写了这个小脚本来完成这项工作：

$(window).load(function() { /* Important because the script has to "wait" until the content (images) has been loaded */
  $('.picture-row').each(function() {
    var rowHeight = 0;
    $(this).children('.picture.item').each(function() {
      if ($(this).outerHeight() > rowHeight) {
        rowHeight = $(this).outerHeight();
      }
    });
    $(this).children('.picture.item').each(function() {
      $(this).height(rowHeight + 'px');
    });
  });
});

- rob_st