【发布时间】：2021-08-09 00:19:55
【问题描述】：
我正在尝试制作一个始终位于页面底部的简单页脚。页面内容永远不会超过屏幕大小，因此无需向下滚动。 （基本上会有 5 个不同的 html 页面，我希望页脚和页眉始终相同。）
但是，一旦我“固定”了页脚，当我在 Chrome 中检查页面时，页脚不再是正文或 html 布局的一部分。
我可以根据需要让页脚出现在屏幕上（使用换行将宽度设置为 65% 并居中），但我认为当指向 body 和 html 时，页脚应该在检查时突出显示。
知道为什么会这样吗？它似乎是根据页脚的位置更改为固定发生的。
这里是 HTML 和相关的 CSS：
<!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;
}
【问题讨论】：