Html 保持页脚在内容下方

我有两个div紧挨着使用绝对定位。但是当我试着做一个页脚的时候，它就在两个div后面。我怎么能让它低于他们？它需要是动态的，所以如果我让其中一个div变大，页脚会留在下方

这是我做的一把快速小提琴，用来展示它。 或

`
左div

`
`
右分区

`
`页脚`
`.左{
位置：绝对位置；
左：10%；
背景色：红色；
}`
`.对{
位置：绝对位置；
左：80%；
背景颜色：蓝色；
}`
`页脚{
宽度：100%；
背景颜色：绿色；
文本对齐：居中；
}`

您可以通过在左侧和右侧div中添加一个父div来实现这一点。将“最小高度”和“相对定位”属性设置为父div。 请在下面找到修改后的代码

<style>
.parent {
    position: relative;
    min-height: 70px;
}

.left {
    position: absolute;
    left: 10%;
    background-color: red;
}

.right {
    position: absolute;
    left: 80%;
    background-color: blue;
}

footer {
    width: 100%;
    background-color: green;
    text-align: center;
}

.家长{
位置：相对位置；
最小高度：70px；
}
.左{
位置：绝对位置；
左：10%；
背景色：红色；
}
.对{
位置：绝对位置；
左：80%；
背景颜色：蓝色；
}
页脚{
宽度：100%；
背景颜色：绿色；
文本对齐：居中；
}

左div


右分区

页脚

Google sticky footer HTML5并选择各种技术；它们都会将页脚至少推到两列中较长的一列。如果内容垂直较短，则大多数情况下会将页脚放在视口底部。

<style>
.parent {
    position: relative;
    min-height: 70px;
}

.left {
    position: absolute;
    left: 10%;
    background-color: red;
}

.right {
    position: absolute;
    left: 80%;
    background-color: blue;
}

footer {
    width: 100%;
    background-color: green;
    text-align: center;
}

<div class="parent">
<div class="left">
    <p>
        left div
    </p>
</div>

<div class="right">
    <p>
        Right div
    </p>
</div>
</div>

<footer>
Footer
</footer>