I am seeking a way to create a sticky footer that remains visible and anchored at the bottom of the screen, while allowing the middle content to scroll as new content is added. The method I have implemented for achieving this effect is as follows:
/* Reset */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
/* Essentials */
.container {
display: table;
}
.content {
display: table-row;
height: 100%;
}
.content-body {
display: table-cell;
}
.scroller {
max-height: 100%;
overflow-y: auto;
}
/* Aesthetics */
.container {
width: 100%;
height: 100%;
}
.header,
.footer {
padding: 10px 20px;
background: #f7f7f7;
}
.scroller {
padding: 20px;
background: #e7e7e7;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
p:last-child {
margin-bottom: 0;
}<div class="container">
<header class="header">
<p>This is the header</p>
</header>
<section class="content">
<div class="content-body">
<div class="scroller">
<p>This is the content.</p>
<p>This is the content.</p>
(content continues...)
</div>
</div>
</section>
<footer class="footer">
<p>This is the footer.</p>
</footer>
</div>While this setup functions correctly in Chrome and Firefox, it encounters issues in Internet Explorer. Is there a straightforward solution to address this problem in IE or perhaps an alternative approach that is more universally compatible?