I am trying to make my footer stick to the bottom of the page. I want it to remain at the bottom even if more content is added. Any help is much appreciated. I have tried almost anything I can think of. I have tried using different positions such as relative, static, fixed but sometimes the footer sticks to the bottom of the screen and is visible even when scrolling (fixed) and sometimes it just sticks to the top of the page (relative). The only was I could get it to come down to the bottom is by adding lots of paragraphs but that's of course not ideal. I appreciate any support and if you know how I can make my code better that would also really help.
Here is my HTML:
<body>
<!-- START OF HEADER -->
<nav>
<ul class="nav-links">
<li><a href="æ"><img class="logo" src="wheel1.png" alt="Logo"></a></li>
<li><a href="æ">Mercedes</a></li>
<li><a href="æ">Bmw</a></li>
<li><a href="æ">Tesla</a></li>
<li><a href="æ">Jaguar</a></li>
<li><a href="æ">Land Rover</a></li>
<li><a href="æ">Nissan</a></li>
</ul>
</nav>
<!-- END OF HEADER -->
<!-- START OF MAIN CONTENT -->
<div class="modelLogo">
<img width="70px" height="70px" src="tesla.png"></img>
<br><br>
<p class="modelName">Tesla</p>
</div>
<p class="comp">Tesla, Inc. (formerly Tesla Motors, Inc.) is an American electric vehicle and alternative energy z company based in Palo Alto, California. The company specializes in electric vehicle manufacturing, battery energy storage from home to grid scale and, through its acquisition of SolarCity, solar panel and solar roof tile manufacturing.
<br><br>
Founded in July 2003 by engineers Martin Eberhard and Marc Tarpenning as Tesla Motors, the company’s name is a tribute to inventor and electrical engineer Nikola Tesla. The next three employees were Ian Wright, Elon Musk, and J. B. Straubel, all of whom are named as co-founders of the company.
</p>
<table class="cars">
<tr>
<td><img width="100%" height="auto" src="models.jpg"><br><br>Model S</td>
<td><img width="100%" height="auto" src="model33.jpg"><br><br>Model 3</td>
</tr>
<tr>
<td><img width="100%" height="auto" src="modelx.jpg"><br><br>Model X</td>
<td><img width="100%" height="auto" src="modely.jpg"><h6>Coming Soon</h6>Model Y</td>
</tr>
<tr>
<td><img width="100%" height="auto" src="roadster.png"><h6>Coming Soon</h6>Roadster</td>
<td><img width="100%" height="auto" src="roadster.png"><br><h6>Coming Soon</h6>Cybertruck</td>
</tr>
<tr>
<td><img width="100%" height="auto" src="roadster.png"><br><br>Semi</td>
<td><img width="100%" height="auto" src="roadster.png"><br><br>Semi</td>
</tr>
</table>
<!-- END OF MAIN CONTENT -->
<!-- START OF FOOTER -->
<div style="border: 1px solid black; position: relative;
bottom: 0;
width: 100%;">hello</div></p>
<!-- END OF FOOTER -->
</body>
And here is my CSS:
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
}
nav{
display: flex;
position: absolute;
width: 100%;
justify-content: space-around;
align-items: center;
min-height: 50px;
background-color:black;
opacity: 0.9;
}
nav:hover{
opacity: 1;
transition: all 0.4s ease;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 70%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: white;
text-decoration: none;
letter-spacing: 1px;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
}
.nav-links a:hover{
color: grey;
transition: all 0.3s ease;
}
.logo{
width: 22px;
height: 20px;
display: flex;
border: 1px solid black;
}
.modelLogo{
position:absolute;
transform: translate(-50%, -50%);
z-index:-1;
text-align: center;
top:180px; left:50%;
}
.modelName{
color: grey;
text-decoration: none;
letter-spacing: 1px;
font-size: 40px;
font-weight: 600;
text-transform: uppercase;
border: 1px solid black;
}
.comp{
position:absolute;
transform: translate(-50%, -50%);
z-index:-1;
text-align: justify;
top:355px; left:50%;
color: #505050;
text-decoration: none;
width: 900px;
letter-spacing: 0px;
font-size: 16px;
font-weight: 300;
text-transform: capitalize;
border: 1px solid black;
}
.cars{
transform: translate(-50%, -50%);
z-index:-1;
top:1060px; left:50%;
width: 65%;
position:absolute;
border-spacing: 12px 12px;
table-layout:fixed;
text-align: center;
font-size: 16px;
border: 1px solid black;
}
td {
height:280px;
font-weight: 300;
background-color: rgb(247,247,247);
border-radius:10px;
-moz-border-radius:10px;
}
td:hover {
color: blue;
font-weight: 300;
}
h6{
font-weight: 400;
color: rgb(232,94,16);
line-height: 2;
}
