I am using a standard Bootstrap 3 CSS setup and I am trying to give columns inside a row the same height. I have been experimenting with using display: table and display: table-cell, which does work, but it seems to add vertical padding to columns with less content.
Consider this HTML snippet:
<div class="row">
<div class="col-xs-4">
<div class="block">
Content for block<br />
Some more content<br />
And a bit more<br />
Last bit
</div>
</div>
<div class="col-xs-8">
<div class="block">
Content for block<br />
Only some more content
</div>
</div>
</div>
And this CSS code:
.row {
display: table;
width: 100%; }
.row > div {
float: none;
display: table-cell;
vertical-align: top; }
.block {
height: 100%;
background: red; }
While the columns now have equal heights, the .block elements do not reflect this change, as the second column has a bottom padding that cannot be removed.
You can see an example in this fiddle: http://jsfiddle.net/cyan8fjz/
Is there a way to make my .block elements utilize the full height:100%? I prefer not to absolutely position the blocks due to varying left and right padding on the columns at different screen sizes.
Keep in mind that although the Bootstrap CSS is excluded from the provided example, it is assumed to be relevant and included in all instances.