强制表格列中的 div 与 CSS 列具有相同的高度答案

【问题标题】：Force divs within table columns to have the same height as column with CSS强制表格列中的 div 与 CSS 列具有相同的高度
【发布时间】：2014-01-12 04:31:29
【问题描述】：

Here's my example.

如果您有两个表格列，其中一个的内容比另一个高，那么另一列内的 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 中，我想要的行为是绿色框填充整个黄色框。

【问题讨论】：

标签： css html-table multiple-columns

【解决方案1】：

当您将 div 指定为 100% 的高度时，它不会增长的原因是父级没有高度。

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

要解决这个问题，您可以为父单元格添加一个高度，并为子单元格设置一个 100% 的高度，如图所示 in this fiddle

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

【讨论】：

对不起，我的问题不清楚。高度无法固定，因为两列包含动态内容。表格、行和列的高度必须取决于其内容。
高度可以是任何东西，只是必须有一些东西，所以当你声明高度为 100% 时，它会抓住它。您可以声明高度为 1px，子 div 仍将继承最大表格单元格的高度。 jsfiddle.net/LUah8/5
哇。这是一个令人难以置信的洞察力。谢谢！

【解决方案2】：

您也可以添加自动溢出。

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

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

或者使用 javascript :)

【讨论】：

很好的发现 - 这适用于 webkit 浏览器，但不适用于 Firefox :( 谢谢！

【解决方案3】：

如果您不想设置具体高度，并且希望它适用于所有浏览器，我在您的forked 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);
  };
};

【讨论】：