问题
I have three columns inside a row. I want all three columns to have the same height (fill the entire white space out)
Currently, it looks like this:
As you can see, the left column is the correct height. Where the middle and the right aren't.
The scaffolding of it looks like this:
<div class="container">
<div class="row">
<div class="span3">
-- menu --
</div>
<div class="span5">
-- gray content --
</div>
<div class="span3">
-- black content--
</div>
</div>
</div>
I've tried to give the middle and the right span height of 100%, but that doesn't do it. Can anybody guide me in the correct direction?
I am using the latest version of Twitter Bootstrap
回答1:
You can solve this without JS. Just use
bottom: 0;
top: 0;
position: absolute; /* The container must have position: relative */
It does magic :)
An example I've made: http://fiddle.jshell.net/E8SK6/1
Result: http://fiddle.jshell.net/E8SK6/1/show/
Edit:
Since you said on a comment that the menu is always the biggest, you can use this new example: http://fiddle.jshell.net/E8SK6/5/
If you don't know which one of them is the longest, maybe the answer on this thread is better. It uses display: table-cell. Here's the example
回答2:
I found this solution for bootstrap 3 which works great for me
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
It uses these styles:
/* columns of same height styles */
.container-xs-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.row-xs-height {
display:table-row;
}
.col-xs-height {
display:table-cell;
float:none;
}
@media (min-width: 768px) {
.container-sm-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.row-sm-height {
display:table-row;
}
.col-sm-height {
display:table-cell;
float:none;
}
}
@media (min-width: 992px) {
.container-md-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.row-md-height {
display:table-row;
}
.col-md-height {
display:table-cell;
float:none;
}
}
@media (min-width: 1200px) {
.container-lg-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.row-lg-height {
display:table-row;
}
.col-lg-height {
display:table-cell;
float:none;
}
}
/* vertical alignment styles */
.col-top {
vertical-align:top;
}
.col-middle {
vertical-align:middle;
}
.col-bottom {
vertical-align:bottom;
}
And this markup
<div class="container container-xs-height">
<div class="row row-xs-height">
<div class="col-xs-6 col-xs-height"></div>
<div class="col-xs-3 col-xs-height col-top"></div>
<div class="col-xs-2 col-xs-height col-middle"></div>
<div class="col-xs-1 col-xs-height col-bottom"></div>
</div>
</div>
回答3:
Ah this is an age old issue.
If you set 100% height on an element, it's parent needs a set height for it to go off. Since the div.row has a fluid height, that won't work.
The way around this would be:
Set a fixed height on the div.row
(probably not a good idea if you want a fluid design)
or
Use jQuery to do it:
HTML
<div class="row equalHeight">
<div class="span3">
-- menu --
</div>
<div class="span5">
-- gray content --
</div>
<div class="span3">
-- black content--
</div>
</div>
jQuery
$('.equalHeight').each(function() {
var eHeight = $(this).innerHeight();
$(this).find('div').outerHeight(eHeight);
});
回答4:
Today, is possible with row-eq-height
LINK: http://getbootstrap.com.vn/examples/equal-height-columns/
来源:https://stackoverflow.com/questions/18227326/make-columns-the-same-height-in-bootstrap