Stretch sidebar to 100% height

Question

How do I stretch a sidebar div to 100% height without the parent height to be specified?

The reason the parent height can't be used is because the content area is dynamic.Using height will just clip my div content.

Here is what I did:

.left {
  width: 70%;
  float: right;
  background: green;
  padding-right:5px;
  box-sizing: border-box;
}

.right {
  width: 30%;
  float: right;
  background: yellow;
  height:100%;/*doesn't stretch*/
}

http://codepen.io/vincentccw/pen/mJEKZe

Answer 1

you can set the parent of left and right to position:relative,and set the right element to position absolute.

.outer {
    position: relative;
    ...
}
.right {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 30%;
    background: yellow;
}
.left {
    width: 70%;
    background: green;
    padding-right:5px;
    box-sizing: border-box;
}

jsfiddle: http://jsfiddle.net/zhouxiaoping/jnde5eod/ you may modify it in details, I hope it can help you.