I'm struggling to get my footer to stay at the bottom of a page that requires scrolling. The code I have only seems to work on pages without scrolling, causing the footer to display in the middle of the page instead of at the bottom where it belongs. I've tried following advice from various websites including:
- https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/
- https://css-tricks.com/couple-takes-sticky-footer/#there-is-flexbox
Unfortunately, none of their solutions have worked for me so far...
Cheers,
Justin
This is the CSS code I am using:
html, body {
height: 100%;
}
body {
background-color: #EEE;
font-family: Helvetica, Arial, sans-serif;
background-image: url (logo.png);
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
display: flex;
flex-direction: column;
}
/* More CSS code here */
Below is my HTML code:
<!DOCTYPE html>
<?php
$database = "seriousdiseases";
$database = new mysqli('localhost', 'root', '', $database) or die ("Unable to connect to the
DB");
?>
<html>
<head>
<!-- Head content goes here -->
</head>
<body>
<div id="container">
<header id="header">
<h1>Header Text</h1>
</header>
<!-- Content and Navigation Code Here -->
<footer class="footer">
Copyright © 2023 Example Site
</footer>
</div>
</body>
</html>