Html 将页脚停靠在主Div外侧的底部

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

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

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

• #标题

  的内容是预先知道的，而

  #正文

  的内容则不是

• #body

  正在填充

  #header

  之后的剩余内容（我使用了

  flex

  方法）

我找到了很多示例，但每个示例的主容器中都有

#footer

我的问题是:

---

如何修复

#页脚

使其保持在底部？

我不知道是否有解决方案，但我通过更改结构解决了它

正如我在问题中提到的，我的

#body

正在填充

#header

之后的剩余空间，所有内容都必须位于其上方（至少在视觉上），包括页脚

我更改了结构，使

#页脚

位于

#正文

的末尾

---

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

位置：已修复？-&-您不需要
display:flex
和
flex direction
尝试以下方法：如果您查看底部，您将看到白色部分，它不应该是白色的。此外，如果表格长度超过页脚，页脚将只停留在屏幕底部，而不是页面底部。这是您建议的结果。因此，将flex方法应用于
主体。没有修好，还是一样
<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  -->

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;
}