Html 如何使内部div固定在外部div的底部，使其在外部div扩展时移动

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

我该怎么做呢？

这是一把小提琴

你想要的是：

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

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

---

希望能有帮助。愿代码与您同在。

这里有一个小提琴示例：

#内部{
位置：绝对位置；
底部：0；
高度：100px；
边框：2倍纯红；
宽度：100%；
}
#外{
边框：2件纯蓝；
位置：相对位置；
高度：200px；
}
更大的
更小
$（函数（）{
高度=200；
$（“#更大”）。单击（函数（）{
高度+=10；
$（'#outer'）.css（'height'，height+'px'）；
});
$（“#更小”）。单击（函数（）{
高度-=10；
$（'#outer'）.css（'height'，height+'px'）；
});
});

而不仅仅是

outerinner

div

s是块级别，除非您重写或浮动或其他内容，否则其宽度始终为100%；或者说长度，你指的是高度吗？是的，我指的是高度，对不起，根据页面结构的不同，有几种不同的方法来实现这一点。谷歌搜索会带来很多不同的结果。这正是我要找的@排名靠前：80%似乎是任意值。你怎么知道该怎么设置呢？好的，你把它设置为宽度的剩余部分。因此，如果宽度为15%，则顶部需要为85%。如果宽度为30%，顶部为70%。设置它的原因是，它可以超出包含的div。

#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>