Equal height elements with CSS

问题:

I read about several different solutions to simulate equal-height columns or elements, but none of them really captured my attention because they were using hacks, incredibly complex HTML layouts or not widely supported attributes.

Here's the example Fiddle.

My goal would be to make sure all the elements have the same height or, at least, the maximum height of the siblings in the row.

A row is composed by 3 elements (in this case, no row wrapper exists but I may consider to add such container element).

Is there a solution that:

1. doesn't require JS
2. doesn't use display: table
3. doesn't use wide padding/margin with negative values
4. doesn't require exponential uses of divs and float

回答1:

With the restrictions you made: No, there isn't.

edit: Because you didn't mention this: You could use tables for this. (welcome back to the 90s)

回答2:

You can use CSS3 flex property for this. Write like this:

CSS  .parent{     display:-moz-box;     display:-webkit-box;     display:box;     -moz-box-orient: horizontal;     -webkit-box-orient: horizontal;     box-orient: horizontal;     width:100%;     min-height:200px; }  .parent div{     background:red;     -moz-box-flex: 1;     -webkit-box-flex: 1;     box-flex: 1;     border:2px solid green; }

HTML

<div class="parent">     <div class="child">1</div>     <div class="child">2</div>     <div class="child">3</div> </div>

Check this http://jsfiddle.net/VkPmg/2/

回答3:

If you have a fix width layout, you can fake it by background-image. Imagine a tile image background that simulate the borders, you will just have to repeat-y in the main container.

For example if you have a 400px container with 3 100px box floating (like your fiddle), you will have to make a 1x400 image repeating in the main container. Just add in this image at the good x position 1 pixel look like the border color you used. And repeat it !

With this technique, your box will not have the same height (in reality) but the display will look like the boxe have it because the higher box will push the container and the background will appear.

转载请标明出处:Equal height elements with CSS

文章来源: Equal height elements with CSS