Css 使div正确展开

我花了过去几个小时研究了我能想到的每一种布局方法，以使其发挥作用。我使用的代码如下：

<!-- Begin Wrap -->
<div id="wrap">

    <!-- Begin contentWrap -->
    <div id="contentWrap">

    <!-- Begin statementDiv -->
    <div id="statementDiv" class="transparent blackText">

        <p>
        ART<br>
        CULTURE<br>
        F<span class="miniMargin">A</span>SHION<br>
        THEBLACK<br>
        COLLARWORKER<br>
        </p>

    </div>
    <!-- End statementDiv -->

<!-- Begin miniWrap -->
<div id="miniWrap">

    <!-- Begin socialDiv -->
    <div id="socialDiv" class="transparent marginRight">
    </div>
    <!-- End socialDiv -->

    <!-- Begin navButtons -->
    <div id="navButtons" class="floatLeft">
            <img src="images/buttons/gallery.png" class="marginRight">
            <img src="images/buttons/blog.png">

        </div>
        <!-- End navButtons -->

    </div>
    <!-- End miniWrap -->

    <!-- Begin fillDiv -->
    <div class="fillDiv transparent blackBG"></div>
    <!-- End fillDiv -->

    </div>
    <!-- End contentWrap -->

    <!-- Begin Footer -->
    <div id="footer">

    </div>
    <!-- End Footer -->

</div>
<!-- End Wrap -->

我反复地改变布局，以至于在不经意间破坏了更多的设计。如有任何提示或建议，将不胜感激

我希望实现的是将statementDiv、miniWrap和fillDiv置于同一水平线上。两个左div具有静态大小。我希望第三个div（fillDiv）自动展开以填充所需的剩余百分比

---

“自动”使div变为0宽，100%使该行下降到其他div下

js我认为这是你想要的：

我的主张：

在不知道你的照片是什么以及想要的最终外观是什么的情况下，很难确定这种方法是否适合你，但是

通过添加.blackg类为#contentWrap提供黑色背景，并将其宽度设置为100%，然后为#statementDiv和#miniWrap提供白色背景

---

因此，主要是为容器提供您希望在.fillDiv中看到的背景色，然后在容器中的s中覆盖该背景色。然后，您可以去掉.fillDiv，因为它似乎只是用颜色填充空间。

您可以更具体地说明您试图对布局执行的操作吗？什么东西在你的布局中不起作用？很抱歉！我会更新主要帖子你可以查看这个参考资料：同时我想我可以找到一个你需要的例子…自从发布以来，我一直在摆弄这个模板。我得出了与你类似的结论。以下是我目前的情况：。一旦我修复了miniWrap div与statementDiv稍微重叠的问题。我解决了重叠的问题。这是对我的申请最有效的方法。谢谢！：）这似乎是一个比我想要的更干净的方法。这是导致div排队的主要变化之一吗#contentWrap{位置：绝对；底部：0；宽度：100%；}

#wrap {height: 100%; width:100%; display: table;}
#miniWrap {height: 41px; width: 362px; float: left; display: table-cell;}
#navButtons {position: relative;height: 41px;float: left;}
#contentWrap {position: absolute;   bottom: 0;  float: left;    display: table-row;}
#socialDiv {height: 41px;float: left;}
#statementDiv {width: 365px; font-size: 42px; font-family: Arial Black, Gadget, sans-serif; line-height: .8; letter-spacing: -3px; display: table-cell;}
.fillDiv {width: 100%;height: 41px;display: table-cell;} 
.miniMargin {margin: 0 -3px;}
.marginRight {margin-right: 3px;}
.floatLeft {float: left;}
.blackText {color: #0d0601;}
.blackBG {background: #0d0601;}