获取子div列以继承最高列的高度/填充整个父高度

时间:2014-08-18 02:07:32

标签: css

网站可以在这里看到:http://storagestaging.com/pricing/

关于四栏定价网格的问题。

我有一个四列定价网格。每列具有不同的高度(由于或多或少的内容)。我想让所有四列填充整个最高列/填充整个父div。

我尝试过display:table和display:table-cell,并将height = 100%添加到父div和子div。有时我会靠近,有时候我会让情况变得更糟。非常感谢任何帮助。

谢谢!

3 个答案:

答案 0 :(得分:0)

如果你决定使用div,那么JS(这是一个jQuery版本,如果你需要知道香草JS lemme)解决方案是可能的:

var max = 0;
$('.myDiv').each(function() {
    if ($(this).height() > max)
        max = $(this).height();
});
$('.myDiv').css('height', max + ' px');

答案 1 :(得分:0)

你可以这样做css,只需父div的高度需要一个固定值。

See this example here

HTML

<div class="outer">
  <div class="inner a"></div>
  <div class="inner b"></div>
</div>

CSS

.outer{
  background: #000;
  width: 500px;
  height: 200px;
}

.inner{
  display:inline-block;
  width: 49%;
  height: 100%;

}

.a{
  background-color: green;
}

.b{
  background: red;
}

答案 2 :(得分:0)

为了满足我的要求,我只需手动设置父节和子节的高度。