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

当你为它指定100％的高度时你的div不会增长的原因是父母没有高度。

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

要解决此问题，您可以向父单元格添加高度，并为子项提供100％的高度，如图所示in this fiddle

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

Answer 2

您也可以添加oveflow auto。

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

它可以在某些智能浏览器中使用，例如chrome。但它会成为其他问题，因为父母在渲染时没有已知的高度。你可以设置.two类的高度，然后.three类中的高度和溢出属性应该可以解决你的问题。

或者使用javascript：）

Answer 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);
  };
};

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

3 个答案: