CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3row-height
CaribouCode
CaribouCode

Reputation: 14428

Equal height columns with Bootstrap 3 while preserving column padding

I have a regular Bootstrap 3 CSS setup. I want to apply the same heights to columns inside a row and have been looking at using display:table and display:table-cell. This method works but it naturally seems to apply vertical padding on the columns with less content.

Take this HTML for example:

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

Then this CSS:

.row { 
  display: table;
  width: 100%; }

.row > div {
  float: none;
  display: table-cell;
  vertical-align: top; }

.block { 
  height: 100%;
  background: red; }

Now the columns do have the same height, but the .block, which has the red background does not reflect this, because the second column has bottom padding applied which I cannot remove.

See this fiddle for an example: http://jsfiddle.net/cyan8fjz/

Is there a solution to get my .block to use the full height:100%? Ideally I do not want to absolutely position the .block because of the left and right padding on the columns (which may change at different screen resolutions).

Note I haven't included the Bootstrap CSS in my example above but I have in the fiddle. Assume it is relevant and included in all examples.

Upvotes: 2

Views: 578

Answers (1)

Brandon Poe
Brandon Poe

Reputation: 481

You could use like this ' padding-bottom: 1000em; margin-bottom: -1000em; trick.

Here's an example: Link

Upvotes: 2

Related Questions