How can I get the left side bar to be equal in height to the right bar?

Question

On my webpage, I want both my sidebar to reach down to the bottom of the page, even if the main content area gets longer. However, it doesn't.

#main {
}
#left {
    background-color: grey;
    height: 100%;
}
#right {
    background-color: yellow;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div id="main" class="row">
    <div id="left" class="col-sm-6 col-xs-6">
        <div id="sidebar">
            <p>Item 1</p>
            <p>Item 2</p>
            <p>Item 3</p>
            <p>Item 4</p>
            <p>Item 5</p>
        </div>
    </div>
    <div id="right" class="col-sm-6 col-xs-6">
        <div id="somethingLong">
            <div id="bigItem">
                 <h2> My big Car </h2>
            </div>
            <div id="bigItem">
                 <h2> My big house </h2>
            </div>
            <div id="bigItem">
                 <h2> My big Paycheck </h2>
            </div>
             <div id="bigItem">
                 <h2> My big mom </h2>
            </div>
        </div>
    </div>
</div>

How do I get left to be at least as long as right, or at best, reach to the bottom of the page?

To get them the same size use `display:table` or `flex`. To reach the bottom of the page use `height: 100%` and set the same height to `html, body`. — Ruddy, Mar 23 '15 at 11:05
http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height — Bluety, Mar 23 '15 at 11:06
@Ruddy both `body` and `html` have `height: 100%`, but the problem is that `right` extends beyond the page, somehow — CodyBugstein, Mar 23 '15 at 11:07
@Imray Then you have not given us all the relevant code. As you can see it works [**Demo**](http://jsfiddle.net/0vLeL175/) — Ruddy, Mar 23 '15 at 11:10
@Ruddy you're right, I made a little demo. I guess to make it equivalent I need to dynamically start adding content to `right` that makes it longer — CodyBugstein, Mar 23 '15 at 11:16
@Imray I have put an answer up that solves your original question, anyone having a similar problem can use that to solve it. — Ruddy, Mar 23 '15 at 11:21

Ruddy · Answer 1 · 2015-03-23T11:23:32.513

As stated in my comment, to get the columns to be the same height you can use display: table; or flex.

Here is a demo using display: table.

#main {
  display: table;
}
#left {
  display: table-cell;
  background-color: grey;
}
#right {
  display: table-cell;
  background-color: yellow;
}

<div id="main" class="row">
  <div id="left" class="col-sm-6 col-xs-6">
    <div id="sidebar">
      <p>Item 1</p>
      <p>Item 2</p>
      <p>Item 3</p>
      <p>Item 4</p>
      <p>Item 5</p>
    </div>
  </div>
  <div id="right" class="col-sm-6 col-xs-6">
    <div id="somethingLong">
      <div id="bigItem">
        <h2> My big Car </h2>

      </div>
      <div id="bigItem">
        <h2> My big house </h2>

      </div>
      <div id="bigItem">
        <h2> My big Paycheck </h2>

      </div>
      <div id="bigItem">
        <h2> My big mom </h2>

      </div>
    </div>
  </div>
</div>

Note: This is not using bootstrap.

Or to get the columns to use the while page use height: 100%;.

Here is a demo of that:

html,
body {
  height: 100%;
}
#main {
  height: 100%
}
#left {
  background-color: grey;
  height: 100%;
}
#right {
  background-color: yellow;
  height: 100%
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div id="main" class="row">
  <div id="left" class="col-sm-6 col-xs-6">
    <div id="sidebar">
      <p>Item 1</p>
      <p>Item 2</p>
      <p>Item 3</p>
      <p>Item 4</p>
      <p>Item 5</p>
    </div>
  </div>
  <div id="right" class="col-sm-6 col-xs-6">
    <div id="somethingLong">
      <div id="bigItem">
        <h2> My big Car </h2>

      </div>
      <div id="bigItem">
        <h2> My big house </h2>

      </div>
      <div id="bigItem">
        <h2> My big Paycheck </h2>

      </div>
      <div id="bigItem">
        <h2> My big mom </h2>

      </div>
    </div>
  </div>
</div>

Note: The content is overflowing due to the height being 100% of the window size.

How can I get the left side bar to be equal in height to the right bar?

1 Answers1