Height issue for nested divs - html

Question

Having a bit of trouble getting my nested divs lined up properly. You can see an example of the code I'm working with on Dabblet:
http://dabblet.com/gist/6125817
I've run into the following issues:
The wrapper scrolls vertically. I can live with this, but ideally I would rather it not.
The content needs to fill up most of the box. If the wrapper takes up the screen, then the content needs to take up most of the space.
The footer needs to align itself to the bottom of the wrapper (plus bottom margin), not bottom: 0.
Everything I try seems to make something else fall out of whack. I've been able to do parts of this when disabling other css classes. Just can't get them to all work at the same time.
Just in case the link isn't working:
body, html {
}
body {
background-image: url('/bground_home.png');
background-size: 100%;
background-repeat: no-repeat;
font-family: 'LegacySansUltra';
font-size: 20px;
}
.wrapper {
width: 90%;
height: 90%;
background-color: white;
border: solid 1px #666;
box-shadow: 10px 10px 5px #888888;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.header {
font-size: 27px;
margin: 10px;
background-color: Black;
border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
color: White;
}
.content {
width: 90%;
height: 70%;
position: relative;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: #effbfb;
border-radius: 15px;
-moz-border-radius: 15px;
border: 3px solid #e0f8fd;
font-size: 25px;
}
.footer {
background-color: black;
padding: 5px;
color: White;
margin: 10px;
border-bottom-right-radius: 15px;
-moz-border-radius-bottomright: 15px;
height: 50px;
}
<div class="wrapper">
<div class="header">
<div style="position: relative; float:left; width: {#logowidth}; height: {#logoheight}; padding: 0px 10px;">
<img src="{#logo}" height="{#logoheight}" width="{#logowidth}" alt="{#name}" border="1" />
</div>
<div style="position: relative; float:left; padding-top: 20px;">
{#name}
</div>
<div style="clear: both;"></div>
</div>
<div class="content">
<div class="links">{#links}</div>
</div>
<div class="footer"></div>
</div>

Answer 1

Use this code:
overflow: hidden;