Question

所以我在一个外部div里面有一个内部div。我希望内部div作为一个页脚，所以它必须坚持在外部div的底部。当外部div扩展（高度）时，我希望页脚与外部div的底部一起移动。我希望你理解我的意思？

我该怎么做？

Answer 1

你想要的是：

#inner {
    position:relative;
    top: 80%;
    width: 100%;
    height: 100%;
}

#outer {
    width:200px;
    height: 100px;
}

希望它有所帮助。愿代码与你同在。

Answer 2

以下是一个示例小提琴：http://jsfiddle.net/fdus48df/

#inner {
    position: absolute;
    bottom: 0;
    height: 100px;
    border: 2px solid red;
    width: 100%;
}
#outer {
    border: 2px solid blue;
    position: relative;
    height: 200px;
}

<button id="larger">Larger</button>
<button id="smaller">Smaller</button>
<div id="outer">
    <div id="inner">
    </div>
</div>

<script>
    $(function() {
        height = 200;
        $('#larger').click(function() {
            height += 10;
            $('#outer').css('height',height+'px');
        });
        $('#smaller').click(function() {
            height -= 10;
            $('#outer').css('height',height+'px');
        });
    });
</script>

如何将inner-div固定在outer-div的底部，以便在outer-div扩展时移动

2 个答案: