Docking Footer to Bottom Outside of Main Div

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.