CODEWITHSUNDEEP
csstwitter-bootstrap
Steve Lorimer
Steve Lorimer

Reputation: 28659

Full height columns in bootstrap 3

I've attempted the solutions given here, but in both cases I can't get my second column to scale to full height.

I've built a simple page to show what I'm getting:

No full height columns

How can I get the second column (photo) to expand to the same height as the first column (test)?

This is the html / css I'm using (matching jsfiddle here:

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <style>
      .fill-columns {
          display: table;
      }
      .fill-column {
          float: none;
          display: table-cell;
          vertical-align: top;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row fill-columns">
        <div class="col-md-8 fill-column">
          <div class="well">
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
          </div>
        </div>
        <div class="col-md-4 fill-column">
          <div class="well">
            <p>Photo</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Upvotes: 0

Views: 1074

Answers (1)

jme11
jme11

Reputation: 17374

The columns are actually behaving as expected, but the content won't automatically fill the column. You can see this if you add the well class to the column itself, such as:

HTML:

<div class="container">
    <div class="row fill-columns">
        <div class="col-xs-8 fill-column well">
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
        </div>
        <div class="col-xs-4 fill-column well">
            <p>Photo</p>
        </div>
    </div>
</div>

If you want to preserve the gutters though, the option that would have the broadest support is probably to use javascript. The foundation framework has a plugin called Equalizer for this purpose. To learn how to integrate Equalizer with Bootstrap, you can see my answer here.

In that answer, I also provide an alternative lighter-weight option. To use that option, you would modify it as follows:

var row=$('.equalize');
$.each(row, function() {
    var maxh=0;
    $.each($(this).find('.well'), function() {
        if($(this).height() > maxh)
            maxh=$(this).height();
    });
    $.each($(this).find('.well'), function() {
        $(this).height(maxh);
    });
});

and in your markup, you'd add the equalize class to your row.

Upvotes: 1

Related Questions