在 div 上设置最小高度，但使所有 div 高度相同答案

【问题标题】：set min-height on div but make all divs same height在 div 上设置最小高度，但使所有 div 高度相同
【发布时间】：2014-03-27 19:18:39
【问题描述】：

我正在使用这个 CSS 代码：

<style type="text/css">
html,body {
    font-family:Arial;
}
.container {
    text-align:center;
}
.box {
    width:350px;
    display: inline-block;
    margin:10px 20px 0 auto;
    padding:10px;
    border:1px solid black;
    min-height:60px;
    font-size:60px;
    text-align: center;
}
.box h2 {
    font-size:40px;
    text-align:center;
}
</style>

但我希望所有 div 都具有相同的高度

我在这里创建了一个小提琴：http://jsfiddle.net/UDm3a/

【问题讨论】：

那么最小高度有什么意义呢？您希望每个 div 具有最高的高度但不低于最小高度？
检查这里：jsfiddle.net/UDm3a - 如果我只做高度会发生什么
我想他应该有一个最小高度，以防它们都比所需的最小值短。但是，我也不确定我是否明白这一点。
哦，这就是问题所在，不同的偏移量。尝试将float: left; 放在他们身上。 jsfiddle.net/UDm3a/2
不幸的是，仅使用 CSS 和您当前的标记似乎是不可能的。

标签： html css

【解决方案1】：

试试这个 jQuery 技巧：

$(function() {
  $.fn.setAllToMaxHeight = function(){
    return this.height(
      Math.max.apply(this, $.map(this, function(e) { return $(e).height() }) )
    )
  }

  $('div.box').setAllToMaxHeight();
  //setTimeout("$('div.box').setAllToMaxHeight();", 10);
});

和CSS添加：

.box {
   width:350px;
   display: inline-block;
   margin:10px 20px 0 auto;
   padding:10px;
   border:1px solid black;
   min-height:60px;
   font-size:60px;
   text-align: center;
   vertical-align: top;
}

示例：http://jsfiddle.net/UDm3a/7/

【讨论】：

这是最好的方法，恕我直言。即使使用 CSS3，它也太棘手了。 Jquery 来救援。

【解决方案2】：

使用高度，而不是最小高度。例如：

height: 220px;

【讨论】：

【解决方案3】：

要获得相同的偏移量和高度，您需要将它们浮动并设置高度。

float: left;
height: 300px;

就像我在 cmets 中给你的小提琴：http://jsfiddle.net/UDm3a/2/

另一个选项是使用vertical-align: top; 和高度，所以：

vertical-align: top;
height: 300px;

在此处查看：http://jsfiddle.net/UDm3a/3/

如果您想动态设置高度，恐怕您必须使用 JavaScript 找到最高点并将其高度应用于其他高度。

【讨论】：

这不是 OP 所要求的。高度应该灵活。
它没有这么说，但我也提到了这种情况——在最后一句话中。

【解决方案4】：

您可以通过减小font-size 并将min-width 和max-width 设置为相同来做到这一点。尽管可能不需要设置min-height，但它对我有用。

CSS
html,body {
font-family:Arial;
}
.container {
text-align:center;
}
.box {
    display: inline-block;
padding:10px;
border:1px solid black;
text-align: center;
    font-size: 100%;
    padding: 10px;
    min-width: 300px;
    max-width: 300px;
}
.box h2 {
font-size:100%;
text-align:center;
}

你可以在这里看到小提琴http://jsfiddle.net/abhishekverma3189/qvtWR/

【讨论】：

【解决方案5】：

如果我说得对，那么有几种方法可以完成你需要的。

您可以在这里找到它们：Fluid Width Equal Height Columns

他们这样解决问题：

变成这样：

you can see a D E M O here

您可以从这里下载源文件：DOWNLOAD FILES

【讨论】：