将浮动元素放在其父级的底部

Question

领带浮动到底部，同时保持其参与布局：

我的方式：

<div id="wrapper">
    <div id="yellow_block_one"></div>
    <div id="yellow_block_two"></div>
    <p>Content to fill and flow around</p>
</div>

在这里看到类似的问题，但没有解决方案。 所以我已经得到了：

以下是构成此屏幕截图的实际代码：http://jsfiddle.net/bmo25tx6/

和片段：

#i_am_main_container {
    width: 500px;
    height: 100%;
    display: table;
    background-color: rgba(200, 200, 100, .5);
}
#i_am_sandbag_pusher {
    width: 10px;
    height: 100%;
    float: right;
    margin-bottom: -100px;
    background-color: red;
}
.i_am_sandbag {
    height: 50px;
    float: right;
    clear: right;
    background-color: yellow;
}

<div id="i_am_main_container">
    <div id="i_am_sandbag_pusher">I AM HERE TO PUSH IT DOWN</div>
    <div class="i_am_sandbag" style="width: 125px">I AM HERE</div>
    <div class="i_am_sandbag" style="width: 250px">TO MAKE IT FLOW AROUND</div>
    <h1>I'M THE HEADER 1</h1>
    <p>I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum!</p>
</div>

但它仅适用于Chrome，效果非常奇怪。例如，如果删除标题，则整个布局将失败。

到目前为止还没有找到使用javascript的解决方案。

Answer 1

在玩了一下之后，我找到了解决方案。

也许你可以用javascript实现预期的效果：

var h = document.getElementById("i_am_main_container").offsetHeight;
document.getElementById("i_am_sandbag_pusher").style.height = h + "px";

Answer 2

#i_am_main_container {
    width: 500px;
    height: 100%;
    display: table;
    background-color: rgba(200, 200, 100, .5);
}
#i_am_sandbag_pusher {
    width: 10px;
    height: 100%;
    float: right;
    margin-bottom: -100px;
    background-color: red;
}
.i_am_sandbag {
    background-color: yellow;
}

<div id="i_am_main_container">
    <div id="i_am_sandbag_pusher">
<div class="i_am_sandbag" style="width: 125px">I AM HERE</div>
    <div class="i_am_sandbag" style="width: 250px">TO MAKE IT FLOW AROUND</div>I AM HERE TO PUSH IT DOWN</div>
    
    <h1>I'M THE HEADER 1</h1>
    <p>I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum! I'm the Lorem Ipsum!</p>
</div>