This is what I want to achieve:

![enter image description here](https://i.stack.imgur.com/CDybi.png)

I got this by giving the `menu-main-window` a fixed height in pixels, which I don't want. I want this effect but responsive.

Here's what I have ([Fiddle](http://jsfiddle.net/fqk2pccz/5/)):

```css
body {
    font: 13px/20px'Helvetica', Tahoma, Verdana, sans-serif;
    color: #404040;
    background-color: #DAECF4;
}
footer {
    left: 0;
    bottom: 0px;
    padding-bottom: 10px;
    background-color: Black;
    font-size: 1em;
    width: 100%;
    height: 30px;
    position: fixed;
    color: White;
    border-top: 2px solid white;
}
header .content-wrapper {
    padding-top: 20px;
}
.breadcrumbs {
    background-color: white;
    border: 1px solid silver;
    border-radius: 10px;
    margin-top: 6px;
    padding-left: 20px;
    box-sizing: border-box;
}

.content-wrapper {
    margin: auto;
    max-width: 98%;
    border-radius: 5px;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}
.menu-main-window {
    border: 1px solid silver;
    border-radius: 20px;
    background-color: White;
    margin: 2% auto 6%;
    box-sizing: border-box;
    height: 100%; /* This does nothing */
}
.user-info {
    float: right;
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    vertical-align: bottom;
}
#body {
    width: 95.9%;
    margin: auto;
}
#top-section {
    border: 1px solid silver;
    border-radius: 20px;
    width: 95.75%;
    height: 100px;
    margin: auto;
    background-color: White;
    box-sizing: border-box;
}
```

```html
<header id="top-section">
    <div class="content-wrapper">
        <div class="float-left"> <a href="../Main/Index"><img class="logo" src="" alt="Logo" title="AppName"/></a>

        </div>
        <div class="user-info">Welcome chiapa</div>
    </div>
</header>
<div id="body">
    <div class="breadcrumbs">Menu</div>
    <div class="menu-main-window"></div>
</div>
<footer>
    <div class="content-wrapper">
        <div class="float-right">
            <p>&copy; AppName v.1.0 - 2014</p>
        </div>
    </div>
</footer>
```

How can I achieve it?