强制表列中的 div 与使用 CSS 的列具有相同的高度

Question

这是我的例子。

如果您有两列表格列，其中一列的内容高于另一列，则另一列中的div 不会扩展到第一列，即使使用 height:100% 也是如此。如何使用 CSS 创建此行为？

<table>
    <tr>
        <td class="one">
            <ul>
                <li>fasdf</li>
                <li>asgasdf</li>
                <li>afdsaggrea</li>
                <li>asgasdf</li>
                <li>afdsaggrea</li>
            </ul>
        </td>
        <td class="two">
            <div class="three">
                First div
                <div>
                    Second div
                </div>
            </div>
        </td>
    </tr>
</table>

即在我的 jsfiddle 中，我想要的行为是填充整个黄色框的绿色框。

Answer 1

当您为div 分配 100% 的高度时，它的原因是父级没有高度。

即。您有一个导致表变大的列表。

为了解决这个问题，您可以向父单元格添加一个高度，并为孩子提供 100% 的高度，如本小提琴所示

.two{
    background-color:yellow;
    height:100px;
}
.three{
    background-color:green;
    height:100%;
}

Answer 2

您也可以添加卵流自动。

.three {
height: 100%;
overflow: auto;
}

它将在一些智能浏览器中工作，如 铬.但这在其他情况下会是一个问题，因为父级在渲染时没有已知的高度。您可以将高度设置为 .two 类，然后 .three 类中的高度和溢出属性应该可以解决您的问题。

或者使用javascript:)

Answer 3

如果你不想

设置一个具体的高度，并且你希望它在所有浏览器中工作，我在你的分支JSFiddle中添加了一个编码良好的javascript解决方案。

var tableCritter = new function TableCritter(){
  var critter=this;
  var $window = $(window);
  var $two = critter.$two = $('.two');
  var $three = critter.$three = $('.three');
  function adjustHeight(){
    $three.css({ height:$two.height() });
  }; 
  adjustHeight();
  $window.on('resize',adjustHeight);
  critter.stop = function(){
    $window.off('resize',adjustHeight);
  };
};