Question

<body style="width: 100%; text-align: center;">
    <div style="margin: 0 auto;">container
        <div style="width: 200px; margin-top: 100px; float: left;">
            left
        </div>
        <div style="width: 728px; float: left;">
            <div style="height: 100px;">
                1
            </div>
            <div style="height: 150px;">
                2
            </div>
            <div style="margin-bottom: 0; bottom: 0; height: 100%;">
                3
            </div>
        </div>
    </div>
</body>

DIV 1有一个固定的高度，

DIV 2通过jQuery改变其高度

DIV 3必须在2向下bottom: 0;之后尽可能延伸

3中缺少哪些样式？

我也希望container居中。

Answer 1

对于那个删除了他的答案的人来说，它已经接近工作了。 height以某种方式被忽略，但使用top和position: absolute;却有效。当DIV 2调整大小时，必须触发一个事件来调整DIV 3的大小：

<body style="width: 100%; text-align: center;">
    <div style="margin: 0 auto;text-align:center">container
        <div style="width: 200px; margin-top: 100px; float: left;">
            left
        </div>
        <div style="width: 728px; float: left;">
        <div style="height: 100px;" id="a">
            1
        </div>
        <div style="height: 150px;" id="b">
            2
        </div>
        <div style="background-color: red; position: absolute; bottom: 0;" id="test">
            3
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $('#test').css('top', $('#a').height() + $('#b').height());
    });
</script>

Answer 2

这可以在没有css tables

的Javascript的情况下完成

<强> FIDDLE

div上的最大高度绑定到底部

2 个答案: