My footer works perfectly on every page of my website, except the mobile version of my About page. On my About page, the content (headers, paragraphs, etc.) is larger than the height of the viewport, and for some reason, the footer sticks to the bottom of the viewport, but not the bottom of the page.
Here is my HTML structure (without the content):
<!DOCTYPE>
<html>
<head></head>
<body>
<div class="wrapper">
<header><nav></nav></header>
<section></section>
<footer></footer>
</div>
</body>
</html>
Here is the relevant CSS:
html,
body {
height: 100%;
}
.wrapper {
position: relative;
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
height: 40px;
width: 100%;
}
And one more weird thing that's happening that I can't explain...
If I go to my About page, resize the browser window's width to something more mobile, and go into the Chrome developer tools... and then I scroll down, past where the footer is (but shouldn't be) on the page, it looks like the <html>, <body>, and <div class="wrapper"> elements all end at where the footer ends on the page, even though the <section> content continues on down. It's like the content is overflowing out of the entire <html> element, and I have no idea why this would happen.
Also, I am aware of position: fixed and that it would easily fix this problem, but I would prefer not to have the footer visible in the viewport at all times. In cases where the content on the page takes up more space than the height of the viewport (necessitating vertical scrolling), I would like for the user to be able to scroll down and then come to the footer at the bottom of the page, not have it in their face at all times.
From inspecting your live site, all the elements in your .about .section-content div are floated. You can either remove the property from them or clear the floats.