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

Question

I am using this CSS code:

<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>

but i want the divs to all have the same height

i have created a fiddle here: http://jsfiddle.net/UDm3a/

Answer 1

Use height, instead of min-height. eg:

height: 220px;

Answer 2

To get the same offsets and heights, you need to float them and set the height.

float: left;
height: 300px;

Like the fiddle I gave you in the comments: http://jsfiddle.net/UDm3a/2/

The other option is to use vertical-align: top; along with height, so:

vertical-align: top;
height: 300px;

See that here: http://jsfiddle.net/UDm3a/3/

If you want to set the height dynamically, I'm afraid you'll have to use JavaScript to find the highest on and apply its height to the others.

Answer 3

You can do this by decreasing the font-size and setting the min-width and max-width as same. Even though setting min-height might not be required but it worked for me.

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

You can see the fiddle here http://jsfiddle.net/abhishekverma3189/qvtWR/

Answer 4

Try this jQuery trick:

$(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);
});

And CSS add:

.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;
}

Example: http://jsfiddle.net/UDm3a/7/

Answer 5

If I got you right, then there are several methods to accomplish what you need.

you can find them here: Fluid Width Equal Height Columns

They solve the problem like this:

to be like this:

you can see a DEMO here

and you can download the source files from here: DOWNLOAD FILES