使div尽可能地增长

Question

我有以下标记：

<div id="outerContent">
    <div id="tabBar">This element is always at the top, defined as block, and 70% width. Also is centered.</div>
    <div id="leftSide">This is a left side bar.</div>
    <div id="content">The actual page content.</div>
    <div id="rightSide">Sidebar ont he right.</div>
</div>

#outerContent将其所有同级div定义为向左浮动，为inline-block s并且margin-left和margin-right设置为auto - 所以它＆＃ 39;中心。

我想知道是否可以尽可能自动地将#content拉伸。目前，我将其设置为宽度的70％，将其他元素设置为10％，并使用margin-right在元素之间留出一些空间。

这意味着使用更少的PHP。我在Yii应用程序中，并希望保持我的设计流畅，所以我不需要使用大量的PHP代码来分配正确的ID。我也在我的代码中使用最新的Bootstrap / JQuery，如果这可能会有所帮助。

Answer 1

如果我找到了你，你会喜欢通过使用内容包装器中的空洞空间来使你的身体在宽度上完全响应。我修改了你的小提琴并使边缘变得有活力。 http://jsfiddle.net/qbkxeLp1/2/现在，您可以最小化和扩大您的网站，而不会丢失任何在边框模型中的浮动位置。

我编辑了边距和宽度：

#content {
    width: 64%;
    background: rgba(0, 0, 0, 0.7);
    margin-bottom: 10px;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 5px;
    padding-bottom: 5px;
    float: left;
}