将页脚停靠在主要 Div 之外的底部

Question

很多时候网页的HTML结构是这样的：

<div id="full">
    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>
</div>

我的有点不同：

<div id="full">
    <div id="header"></div>
    <div id="body"></div>
</div>
<footer id="footer"></footer><!-- I assume it doesn't matter whether it's a footer or a div  -->

和 CSS:

html, body {
    height: 100%;
}
body {
    position: relative;
    min-height: 100%;
    direction: rtl;
}
#full {
    position: relative;
    min-height: 100%;
    height: 100%;
    padding-top: 2%;
    display: flex;
    flex-direction: column;
}
#header {
    position: relative;
    padding-bottom: 2%;
}
#body {
    width: 100%;
    flex-grow: 1;
    background-color: #F6F6F6;
}
#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 14px;
}

除了结构本身，我认为值得一提的是：

#header 的内容是众所周知的，而 #body 的内容不是。
#body是填充#header之后的剩余内容（我用的是flex的方法）

我找到了很多示例，但每个示例在主容器中都有 #footer。

我的问题是：

如何修复 #footer 使其留在底部？

Answer 1

不知道有没有我想要的解决方案，我通过改结构解决了

正如我在问题中提到的，我的 #body 正在填充 #header 之后剩余的 space，所有内容都必须在其之上（至少在视觉上），包括页脚。

我更改了结构，使 #footer 位于 #body 的内部。

这听起来不像是正确的解决方案，但它对我有用，而且不会引起任何其他问题。

将页脚停靠在主要 Div 之外的底部

Docking Footer to Bottom Outside of Main Div

html

css

footer