I've encountered an issue where my container doesn't touch the footer in most cases, and I can't figure out what's causing it.
Let me share my CSS code:
html {
min-height: 100%;
position: relative;
}
body {
margin: 0;
width: 100%;
height: 100%;
}
section {
height: 100%;
}
#container {
overflow: auto;
width: 80%;
margin: 0 auto;
background: red;
height: 100%;
}
.footer {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
And here's my HTML:
<body>
<div id="container">
<section>
<p>Content goes here</p>
</section>
</div>
<div class="footer">Content</div>
</body>
Even though I have set all heights for parent elements, there is still a noticeable gap between the container and the footer. When the content fills the entire page, the container and footer touch, but the content seems to get obscured by the footer. How can I address this problem?