html - 如何使用 html/css 将容器 div 从页眉拉伸(stretch)到页脚？

我想拉伸(stretch)我的红色 content cless 从页脚拉伸(stretch)到页眉。我知道如果我用内容填充它，它会，但我如何让它按原样拉伸(stretch)？

您可以克隆元素 here

相关代码:

html:

<body>
    <div class="wrapper">
        <div class="header">
            <div class="nav">
                <div class="logo">
                    <strong>
                        <a href="index.html">
                            <img src="images/logo.png" alt="Sam Jarvis logo"/>
                        </a>
                    </strong>
                </div>
                <div class="menu">
                    <ul>
                        <li><a href="#home">HOME</a></li>
                        <li><a href="#about">ABOUT</a></li>
                        <li><a href="#work">PORTFOLIO</a></li>
                        <li><a href="#clients">CONTACT</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="content">

        </div>
    </div>
    <div class="footer">
        <div class="footercontent">
            <p>&copy; 2013 Friend | Design and Development. All Rights Reserved.</p>
        </div>
    </div>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>

CSS:

.wrapper {

    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -6.25em;
}

.header {
    width: 100%;
    height: 100px;
    background-color: #000000;
    margin: 0 auto;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

.content {
    width: 1000px;
    border: 1px solid #ff0000;
    margin: 0 auto;
    height: 100%;
    min-height: 100%;
}

enter image description here