1

In a two column layout, where one column is static and the other has generated content, how can both be maintained to be 100% the height of the wrapper?

https://jsfiddle.net/t1h4vngv/1/

HTML 

<div class="wrapper">
  <div class="col left">
    Static stuff
  </div>
  <div class="col right">
    Dynamic Stuff
  </div>
</div>

CSS

html,
body,
.wrapper,
.col {
  height: 100%;
  margin: 0;
  padding: 0;
}

.col {
  float: left;
}

.left {
  background: lightblue;
}

.right {
  background: lightgreen;
}

.thing {
  width: 200px;
  height: 100px;
  background: beige;
  border: 2px solid grey;
}

JS

var el = '<div class="thing">Hi</div>'
var $right = $('.right')
for (var i = 0; i < 20; i++) {
  var $el = $(el);
  $right.append($el)
}
BarryBones41
  • 1,361
  • 1
  • 13
  • 30

2 Answers2

2

Flexbox can do that:

var el = '<div class="thing">Hi</div>'
var $right = $('.right')
for (var i = 0; i < 10; i++) {
  var $el = $(el);
  $right.append($el)
}
html,
body,
.wrapper,
.col {
  min-height: 100%; /* note min-height */
  margin: 0;
  padding: 0;
  display: flex;
}

.col {
  display: flex;
  flex-direction: column;
}

.left {
  background: lightblue;
}

.right {
  background: lightgreen;
}
.thing{
  width:200px;
  height:100px;
  background:beige;
  border:2px solid grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="col left">
    Static stuff
  </div>
  <div class="col right">
    Dynamic Stuff
  </div>
</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • Damn, you beat me to it. I was just scrapping up a codepen haha. I'll upvote your answer for using flex ;) – zsawaf Jul 20 '16 at 15:48
0

The problem here comes from the float. In fact you want to set the same height to two floated elements. Have a look on that ticket HTML/CSS: Making two floating divs the same height

Try to add some content in the right column, you'll see that it works. Hope it helps ;)

Community
  • 1
  • 1
R. Foubert
  • 633
  • 4
  • 8