Docking Footer to Bottom Outside of Main Div - html

Question

A lot of times the HTML structure for a web page is this:
<div id="full">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
Mine's a little different:
<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 -->
And the 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;
}
Aside from the structure itself, I think it's worth mentioning that:
The #header's content is pre-known and #body's isn't.
The #body is filling the remaining content after #header (I used the flex method).
I found a lot of examples but each of them had the #footer inside the main container.
My question is:
How do I fix the #footer so it'll stay at the bottom?

Answer 1

I don't know if there's a solution to what I wanted, but I solved it by changing the structure.
As I mentioned in my question, my #body is filling the remaining space after the #header, and everything has to be on top of it (visually, at least), including the footer.
I changed my structure so that the #footer is inside the #body, at the end of it.
That doesn't sound like the right solution but it works for me without causing any other problems.