问题描述
我正在尝试制作一个始终位于页面底部的简单页脚。页面内容永远不会超过屏幕尺寸，因此无需向下滚动。 （基本上会有 5 个不同的 html 页面，我希望页脚和页眉始终相同。）
但是，一旦我使页脚“固定”，当我在 Chrome 中检查页面时，页脚不再是正文或 html 布局的一部分。
我可以根据需要让页脚出现在屏幕上（使用换行将宽度设置为 65% 并居中），但我认为当指向正文和 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,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;
}
解决方法
我认为这就是您所需要的：https://matthewjamestaylor.com/bottom-footer
此处与您的代码集成在一起：
html,body {
margin:0;
padding:0;
height:100%
}
#container {
margin-left:0.5em;
min-height:100%;
position:relative;
}
header {
padding:0.1px;
}
main {
padding-bottom:60px; /* Height of the footer */
}
footer {
border-top: 2px solid black;
width: 100%;
font-size: 12px;
padding-top: 0.5rem;
bottom:0;
position:absolute;
}
footer a {
color: inherit;
font-size: 46px;
padding-left: 1rem;
}<!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>
<div id="container">
<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,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>
</div>
</body>
</html>（注意，页脚高度是在 padding-bottom 中为 main 设置的。）
试试这个代码，它会起作用
https://i.stack.imgur.com/ZFOcU.png
