Css 父Div不'；Don’不要把孩子们都拉到尽头

我被一个Div布局困住了。有两个主要的部门，其中包括儿童部门<代码>容器和

底部

。容器（绿色Div）没有延伸到其子容器的末端。以下是一个屏幕截图：

我尝试了

清除：在不同的情况下

和

位置

，但都不起作用

还需要将水平灰色Div粘贴到其父对象的底部

这是代码（尽管它在JSFIDLE中看起来与我的FF/Chrome浏览器不同）：

这是我们想要达到的结果：

来自小提琴的代码 这是html

<div id="container">
    <div id="middle">
        <div class="right"></div>
        <div class="center"></div>
        <div class="left"></div>
        <div style="clear: both;"></div>
    </div>
    <div id="bottom">
        <div id="first">
    <div class="right"></div>
    <div class="center"></div>
    <div class="left"></div>
        </div>
        <div id="second">
    <div class="module"></div>
    <div class="banner"></div>
         </div>
    </div>
    <div style="clear: both;"></div>
</div>

---

谢谢

给出位置：相对于

#秒

并给出

位置：绝对；底部：0到第二条。横幅

代码

    div#container {
    width: 1000px;
    min-height: 100%;
    margin: 45px auto; 
    background: green;
}
div#middle {
    width: 100%;
    height: 560px;
    margin-top: 20px;
}
div#middle .right {
    float: right;
    width: 205px;
    height: 100%;
    background: yellow;
}
div#middle .center {
    float: right;
    width: 455px;
    height: 100%;
    margin: 0 10px; 
    background: orange;
}
div#middle .left {
    float: left;
    width: 320px;
    height: 100%;
    background: blue;
}

div#bottom {
    width: 100%;
    height: 100%;
    margin-top: 20px;
    background: brown;
}
div#bottom #first {
    float: right;
    width: 100%;
    height: 400px;
    background: red;    
}
div#bottom #first .right {
    float: right;
    width: 325px;
    height: 100%;
    background: pink;
}
div#bottom #first .center {
    float: right;
    width: 325px;
    height: 100%;
    margin: 0 12px;
    background: pink; 
}
div#bottom #first .left {
    float: left;
    width: 325px;
    height: 100%;
    background: pink;
}
div#bottom #second {
    float: right;
    width: 100%;
    height: 100%;
    background: black;
    margin-top: 10px;
    position:relative;
}
div#bottom #second .module {
    float: right;
    width: 325px;
    height: 300px;
    background: silver;
}
div#bottom #second .banner {
    float: left;
    width: 645px;
    min-height: 100px;
    vertical-align: bottom;
    background: silver;
    position:absolute;
    bottom:0;
}

jsfiddle工作示例

编辑注释问题：height属性指定绝对高度。因为浮动的内容实际上不占用任何垂直空间

由于我们希望它至少扩展到100%的高度，因此可以使用“最小高度”属性将其强制到该位置，并且仍然保持使父绿框完全包含子绿框所需的“自动”高度，仅在需要时才允许其推过100%。所以使用最小高度：100%

更多信息：
我仍然看不到任何效果…你能提供一个工作小提琴吗？它适合我，在模块中用静态高度更新。100%高度与小提琴不太匹配谢谢。它在第二条横幅上起作用，并贴在底部。但是将
相对
赋予
第二个
不会改变如果你不赋予第二个相对，你的横幅div将漂浮在其他div之上。“绝对定位元素是相对于第一个父元素定位的，该父元素的位置不是静态的。”很抱歉，我误解了您的问题，因为我们希望它至少扩展到100%的高度，我们可以使用“最小高度”属性将其强制到该位置，并且仍然保持“自动”使父绿框完全包围子绿框所需的高度，只有在需要时才允许它100%地推过去。所以使用最小高度：100%；“高度”属性指定绝对高度。既然浮动的内容实际上不占用任何垂直空间，出于好奇，为什么要使用
div#bottom#first.center
而不仅仅是
#first.center
。因为每个id都必须是唯一的，所以两个规则应该具有相同的效果。如果我只是删除了
div
而没有出错，那么您是否修复了此问题？如果没有，请尝试将
溢出：auto
赋给父容器-它会使框绕过任何浮动的子div。如果这不起作用，您可以尝试从容器中删除
高度：100%
。因为看起来你想要孩子的div是100%高，你可能想研究一下使用
display:table
和
display:table cell
@three fouronesixone三个严重的问题我不知道为什么我首先使用
div#bottom（比如
div#bottom
）什么时候不应该？（只是
#bottom
）执行jquery选择器时，
div#bottom
会更快，而执行css时，
#bottom
会更快selector@Pete：你有测试用例来支持吗？@Dummy初学者：我绝对不会推荐。你能想到的唯一原因是如果你有两个不同的页面，你想在其中显示相同的内容但是不同的格式是
nav#shoppingcart
和
部分#shoppingcart
，但我更喜欢
#shoppingcart.navigation
和
#shoppingcart.preview
。
    div#container {
    width: 1000px;
    min-height: 100%;
    margin: 45px auto; 
    background: green;
}
div#middle {
    width: 100%;
    height: 560px;
    margin-top: 20px;
}
div#middle .right {
    float: right;
    width: 205px;
    height: 100%;
    background: yellow;
}
div#middle .center {
    float: right;
    width: 455px;
    height: 100%;
    margin: 0 10px; 
    background: orange;
}
div#middle .left {
    float: left;
    width: 320px;
    height: 100%;
    background: blue;
}

div#bottom {
    width: 100%;
    height: 100%;
    margin-top: 20px;
    background: brown;
}
div#bottom #first {
    float: right;
    width: 100%;
    height: 400px;
    background: red;    
}
div#bottom #first .right {
    float: right;
    width: 325px;
    height: 100%;
    background: pink;
}
div#bottom #first .center {
    float: right;
    width: 325px;
    height: 100%;
    margin: 0 12px;
    background: pink; 
}
div#bottom #first .left {
    float: left;
    width: 325px;
    height: 100%;
    background: pink;
}
div#bottom #second {
    float: right;
    width: 100%;
    height: 100%;
    background: black;
    margin-top: 10px;
    position:relative;
}
div#bottom #second .module {
    float: right;
    width: 325px;
    height: 300px;
    background: silver;
}
div#bottom #second .banner {
    float: left;
    width: 645px;
    min-height: 100px;
    vertical-align: bottom;
    background: silver;
    position:absolute;
    bottom:0;
}