Question

我遇到了Div布局。有两个主要的分区，包括儿童分区; Container和bottom。容器（绿色部门）不会延伸到孩子的尽头。这是一个截图： enter image description here

我在不同情况下尝试clear: both和position，但没有效果。

还需要将水平灰色Div粘贴在其父母的底部。

这是代码（尽管在我的FF / Chrome浏览器中JSFiddle看起来不同）：http://jsfiddle.net/7KB9z/

这是想要实现的结果：

enter image description here

来自小提琴的代码

这是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>

这是css

div#container {
    width: 1000px;
    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;
}




/*Bottom section*/
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;
}
div#bottom #second .module {
    float: right;
    width: 325px;
    height: 100%;
    background: silver;
}
div#bottom #second .banner {
    float: left;
    width: 645px;
    min-height: 100px;
    vertical-align: bottom;
    background: silver;
}

谢谢

Answer 1

给出位置：相对于#second

并将position:absolute; bottom: 0提供给#second.banner

<强>码

    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;
}

Js fiddle work example jsfiddle

关于评论问题的编辑：height属性指定绝对高度。由于浮动的内容实际上不占用任何垂直空间。

由于我们希望它扩展到至少100％的高度，我们可以使用min-height属性强制它，并仍然保持使父绿框完全包含子项所需的“自动”高度，让它只在需要时才超过100％。所以使用min-height：100％;

更多信息：detailed explanation

父母Div不会延伸到孩子的最后

来自小提琴的代码

1 个答案: