html - 拉伸(stretch) div 以适应它的内容

Question

我已经尝试了互联网上的所有解决方案，但都不适合我。我想在 'wrap' div 中创建一个 'content' div 和一个 'side' div，并将 'wrap' 的下方设为页脚 div。如果我在“内容”中添加更多文本，div 会增长并适合它的内容，然后将页脚向下推。 “边”也一样。我制作了一个 jsfiddle.net/h97t9me4/4 来说明，但它使用的是表格而不是 div。我怎样才能做到这一点？谢谢。

Answer 1

这是我想出的:

http://codepen.io/anon/pen/wDnsr

HTML

    <div class="content">
        <p>This is the content</p>
    </div>

    <div class="side">
        <p>This is the side</p>
    </div>

    <div class="footer">
        <p>This is the footer</p>
    </div>

</div>

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.content {
    width: 75%;
    padding: 1em;
    float: left;
}

.side {
    width: 25%;
    padding: 1em;
    float: left;
}

.footer {
    width: 100%;
    padding: 1em;
    clear: left;
}