Set footer to the bottom in Single page application [duplicate] - html

Question

This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 4 years ago.
I am trying to create a Single page application.
html content:
<div class="containerDiv">
<div class="headerDiv"></div>
<div class="contentDiv"></div>
<div class="footerDiv"></div>
</div>
All my application content will go inside contentDiv along with ng-view.
css content:
.containerDiv {
position: relative;
min-height: 100%;
background-color: beige;
}
.headerDiv {
height: 60px;
background: black;
width: 100%;
}
.contentDiv {
padding-bottom: 60px;
}
.footerDiv {
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-color: pink;
width: 100%;
height: 60px;
}
Everything works fine with non-positioned elements and footer stay at the bottom, when content height increases.
I want to add positioned elements(absolute or relative) in the contentDiv as per my requirements.
When height of my positioned element increases, it breaks my page as footer remains at same position and elements overrides it.
Suppose I want to add a table in contentDiv
<div class="data">
<table>
</table>
</div>
I want to align table at particular location in html.
.data{
position:absolute/relative;
top: 300px;
left: 400px;
}
If height of the table increases, it will go out of the scope of footer.
The height of the table is dynamic.

Answer 1

Not sure what you're trying to achieve here.
If you want to have your footer always sticked to the bottom of the page, like "floating" over your page content, you need to set the footerDiv's position to fixed in your CSS.
JsFiddle example for fixed position
If instead you want the footer to not overflow anything, you can set the position to relative, since it's already at the bottom of your container layout.
JsFiddle example for relative position
Applying the answer from the duplicated question to your case, here is yet another solution for a sticky footer, w/o making it fixed
JsFiddle example for sticky footer w/o fixed