I am in the process of creating a simple footer that will always stay at the bottom of the page. The content on the page will not exceed the screen size, eliminating the need for scrolling. (There are a total of 5 HTML pages, and I want the footer and header to remain consistent across all of them.)
However, when I set the footer to be "fixed", upon inspecting the page in Chrome, it seems like the footer is no longer considered part of the body or HTML layout.
I have managed to display the footer on the screen by adjusting its width to 65% and centering it using a wrapper. However, I believe the footer should become highlighted when pointing to the body and HTML elements during inspection.
Any insights into why this might be happening? It appears to be related to changing the position of the footer to fixed.
Below is the HTML and relevant CSS code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="../normalize.css">
<link rel="stylesheet" href="index-styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<title>Play2Learn Home Page</title>
</head>
<body>
<header>
<h1>Play2Learn Logo</h1>
<nav>
<ul>
<li><a class="border" href="index.html">Home</a></li>
<li id="games-li"><a class="border" href="#">Games</a>
<ul id="games-ul">
<li><a href="games/anagram-hunt.html">Anagram Hunt </a></li>
<li><a href="games/math-facts.html">Math Facts Practice</a></li>
</ul>
</li>
<li><a class="border" href="about.html">About</a></li>
<li><a href="login.html">Login </a></li>
</ul>
</nav>
</header>
<main>
<div id="testimonial">Happy Clients Say...</div>
<div id="quote">"I never have more fun than when I'm playing Anagram Hunt. It's the best game I've ever played!"</div>
<div id="author">-Justin Jest</div>
<section id="grids">
<div id="grid1">
<h3 class="article-title">Anagram Hunt</h3>
<article id="article1">Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
Cura bitur tristique odio ac sem congue luctus.
Praesent vel rutrum lectus.
Nam mattis finibus odio. Suspendisse ligula orci,
ullamcorper vitae nulla nec, tempor auctor felis.
Sed eu luctus sem.
</article>
<a href="games/anagram-hunt.html" title="Play Anagram Hunt"><button>Play</button></a>
</div>
<div id="grid2">
<h3 class="article-title">Math Facts Practice</h3>
<article id="article2">Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
Cura bitur tristique odio ac sem congue luctus.
Praesent vel rutrum lectus.
Nam mattis finibus odio. Suspendisse ligula orci,
ullamcorper vitae nulla nec, tempor auctor felis.
Sed eu luctus sem.
</article>
<a href="games/math-facts.html" title="Play Math Facts Practice"><button>Play</button></a>
</div>
</section>
</main>
<footer>
© 2021 Play2Learn
<a href="contact-us.html" title="Contact Us"><i class="fas fa-envelope-square"></i></a>
<a href="https://instagram.com" title="Instagram"><i class="fab fa-instagram-square"></i></a>
<a href="https://twitter.com" title="Twitter"><i class="fab fa-twitter-square"></i></a>
<a href="https://facebook.com" title="Facebook"><i class="fab fa-facebook-square"></i></a>
</footer>
</body>
</html>
<footer {
border-top: 2px solid black;
width: 100%;
height: 60px;
font-size: 12px;
padding-top: 0.5rem;
bottom: 0;
position: fixed;
}
footer a {
color: inherit;
font-size: 46px;
padding-left: 1rem;
}