我发现了许多其他的问题，其中所有的答案都没有工作，这范围从使用jquery和跟踪屏幕大小到动态改变页脚的css，只是使用@media。这些都不起作用，我不知道为什么。
<!DOCTYPE html>
<html>
<head>
<title>Netters - Nets for All</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display:flex;
flex-direction: column;
flex:1;
background-color: #2b2b2b;
}
header {
background-color: #7f60d7;
color: #fff;
padding: 20px;
text-align: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
border-bottom: 2px solid #fff;
}
section {
padding: 50px;
text-align: center;
background-color: #2b2b2b;
color:white;
}
section h2 {
font-size: 36px;
margin-bottom: 20px;
}
section ul {
list-style-type: none;
margin: 0;
padding: 0;
}
section li {
font-size: 24px;
margin-bottom: 10px;
}
footer {
background-color: #7f60d7;
color: #fff;
padding: 20px;
text-align: center;
}
.active{
text-decoration: underline;
}
.dropdown {
display: inline-block;
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
width: 100%;
overflow: auto;
background-color: #7f60d7;
box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.4);
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a {
display: block;
color: white;
padding: 5px;
text-decoration: none;
}
.dropdown-content a:hover {
color: white;
background-color: #a289e9;
}
h2>a{
color:white;
text-decoration: none;
}
h2>a:hover{
text-decoration: underline;
color:#d8c9ff;
}
</style>
</head>
<body>
<header>
<img src="netters.png" alt="" width="269" height="100">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<div class="dropdown">
<li><a class="active" href="products.html">Products</a></li>
<div class="dropdown-content">
<a href="sportNet.html">Sports Nets</a>
<a href="fishingNet.html">Fishing Nets</a>
<a href="agricultureNet.html">Agriculture Nets</a>
<a href="industrialNet.html">Industrial Nets</a>
</div></div>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<section id="products">
<h1 style="border: solid thin black;display: inline;font-size: 4em;">Our Products</h1>
<ul>
<div>
<h2 ><a href="sportNet.html" >Sports Nets</a></h2>
</div>
<div>
<h2 ><a href="fishingNet.html">Fishing Nets</a></h2>
</div>
<div>
<h2><a href="agricultureNet.html">Agriculture Nets</a></h2>
</div>
<div>
<h2><a href="industrialNet.html">Industrial Nets</a></h2>
</div>
</ul>
</section>
</main>
</body>
<footer style="position:relative;left:0;bottom:0;width: 100%;">
<p>Netters © 2023. All Rights Reserved.</p>
</footer>
</html>
当它调整大小时，它会将页脚从页面底部拉到页面中间。
我尝试将位置从相对切换到绝对，这适用于一个而不是另一个，这是另一个显示器的情况，它适用于相对而不是绝对。这里有很多关于它的问题，我可以证实几乎每一个都没有在我的案例中起作用。我已经尝试过@media与min-width/max-width或min-height/max-height
试着把它添加到你的CSS页脚
footer {
position: fixed;
bottom: 0;
}