我怎样才能让一个内部div固定在外部div的底部，所以当外部div展开时它会移动

Question

所以我在外div里面有一个内-div。我希望内部 div 用作页脚，因此它必须粘在外部 div 的底部。当 outer-div 扩展（高度）时，我希望页脚与 outer-div 的底部一起移动。我希望你明白我的意思？

我该怎么做？

Answer 1

你想要的是：

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

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

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

Answer 2

这是一个例子fiddle：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>

我怎样才能让一个内部div固定在外部div的底部，所以当外部div展开时它会移动

How can I make a inner-div fixed on the bottom of outer-div, so it moves when the outer-div expands

html

css