将底部的页脚与可变的内容高度对齐

Question

因此，我正在尝试实现以下目标：

我知道这看起来已经是一个问题，但是我已经尝试了所有可用的stackoverflow解决方案。

我当前的结构是： HTML：

<div class='app'>
    <div class='content'>Content</div>
    <div class='footer'>Footer</div>
</div>

CSS：

.app{
    text-align: center;
    background-color: #1a1f25;
    min-height: 100%;
    width: 100%;
    position: relative;
    overflow-y: auto;
    top: 0;
}
.footer{
    color: lightgray;
    padding: 10px 30px;
    position: absolute;
    width: 100%;
    font-size: 10px;
    background: black;
    bottom: 0;
}

更新：我尝试检查给出的here答案，但是我的网站具有响应能力，并且该答案适用于具有固定高度的页脚。这使得很难为我的用例转换该解决方案。