I am looking to dynamically position my footer at the bottom of the page.
The footer should be fixed at the bottom.
If the page content exceeds the viewport, the footer should automatically adjust its position.
html {
position: relative;
min-height: 100%;
}
body {
padding-top: 60px;
margin-bottom: 75px;
}
footer {
position: absolute;
bottom: 0;
width: 90%;
height: 45px;
line-height: 45px;
}<div id="container">
<div id="main">
</div>
<div id="footer">
<div class="container">
<span>Place sticky footer content here.</span>
</div>
</div>
</div>