My goal is to position the footer at the bottom of the page.
This is the initial code I tried:
<html>
<head>
<title>Freds Cars, Trucks & Jeeps</title>
<style>
#container{
height: auto;
width: 100%;
}
</style>
</head>
<body style="margin: 0px;>
<div id="container">
<header style="background-color:black;
color: white;
text-align:center">
Fred's Cars, Trucks & Jeeps
</header>
<h1>Welcome to Freds Cars!</h1>
Thank you for visiting our site!
<footer style="background-color:black;
color: white;
text-align:center">
121 Fredway St.
Cartown USA
</footer>
</div>
</body>
</html>
However, the webpage did not display as intended:
https://i.sstatic.net/IqK4y.png
I assumed setting the container id style would make the container div 100% but evidently not. Is there a simpler solution?
UPDATE
To resolve the issue, I made the following changes:
<html>
<head>
<title>Freds Cars, Trucks & Jeeps</title>
<style>
body{
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
header{
height: 5vh;
padding-top:5;
background-color:black;
color: white;
text-align:center;
font-size: 16pt;
font-weight: bold;
font-family: arial;
}
.spacer {
flex: 1;
}
</style>
</head>
<body>
<header>
Fred's Cars, Trucks & Jeeps
</header>
<h1>Welcome to Freds Cars!</h1>
Thank you for visiting our site!
<div class="spacer"></div>
<footer style="background-color:black;
color: white;
text-align:center">
Contact us: (555)555-5555<br />
121 Fredway St.<br />
Cartown USA
</footer>
</body>
</html>
The updated code now displays correctly like this: