Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

Is it possible to get two fluid column wells with uneven column data length to be the same height?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
542 views
Welcome To Ask or Share your Answers For Others

1 Answer

Here's a responsive CSS solution, based on adding a large padding and an equally large negative margin to each column, then wrapping the entire row in in a class with overflow hidden.

.col{
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#ffc;
}

.col-wrap{  
overflow: hidden;   
}

You can see it working at jsFiddle

EDIT

A variation if you want equal height wells or columns with rounded corners:
http://jsfiddle.net/panchroma/4Pyhj/

EDIT

Another variation with equal height wells or columns with rounded corners, this time for Bootstrap 3
http://jsfiddle.net/panchroma/D4xdE/

It's more or less the same as with Bootstap 2, but with some refinements to accomodate a change in how BS spaces the column grids now.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...