Using CSS calc() in App Style Layout with Footer - css

Question

I'm trying to use CSS calc() to build an App Style layout with a footer at the bottom.
The main CSS players:
.content-container {
height: calc(100% - 110px);
background-color: red;
overflow: hidden;
}
.left, .right {
float: left;
height: 100%;
}
.left {
width: 70%;
background-color: blue;
}
.right {
width: 30%;
background-color: yellow;
}
.right-content {
overflow: auto;
height: 100%;
margin-bottom: 30px;
}
Here's a quick overview of the HTML:
<div class="content-container">
<div class="left">
<h1>left</h1>
</div>
<div class="right">
<div class="right-title">
TITLE OF THE SECTION
</div>
<div class="right-content">
<div class="group">
</div>
</div>
</div>
</div>
<div class="footer"></div>
Please view the full example here:
http://codepen.io/woocas/pen/MwyBGd?editors=110
I'm trying to make the overflow in the .right div (the yellow one) take the height of the .content-container.
But as you can see in the example, the scrollbar goes beyond the space allocated to it by content-container. It's behind the footer.
Any help would be greatly appreciated.

Answer 1

Have you tried setting the CSS heights in your right column to percentage values since they're embedded in a container they'll always present in a fit manner?
.right-title {
background-color: gray;
height: 65%;
}
.right-content {
overflow: auto;
height: 35%;
}

Answer 2

You could do another calc on the .right height and add a margin-bottom, so that .right will not go beyond the footer, but the whole thing seems to be a bit over-complicated.
.right {
width: 30%;
background-color: yellow;
height: calc(100% - 90px);
padding-bottom: 90px;
}