如何让HTML页面的footer在窗口缩放后始终固定于底部

我尝试过多种方案解决窗口缩放时页脚从页面底部移至中间的问题，包括用jQuery跟踪屏幕尺寸动态修改footer的CSS样式，以及使用@media规则，但都未奏效。将footer的position属性改为absolute仅在一台显示器上有效，另一台无效；结合min-width/max-width、min-height/max-height的@media规则也没能解决问题。

我的HTML代码： #

<!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 &copy; 2023. All Rights Reserved.</p>
  </footer>

</html>

解决方案 #

问题根源在于你已经使用flex布局，但未正确设置容器高度和主内容的占比，导致页脚无法固定在底部。修改以下几点即可解决：

1. 给html和body设置100%高度，确保flex布局有足够垂直空间：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

2. 移除body的flex:1，给main添加flex: 1，让主内容占满header和footer之外的所有空间：

body {
  font-family: Arial, sans-serif;
  display:flex;
  flex-direction: column;
  background-color: #2b2b2b;
}

main {
  flex: 1;
}

3. 去掉footer的内联样式，用统一CSS控制，无需position: relative或absolute，flex布局会自动将footer推到页面底部：

footer {
  background-color: #7f60d7;
  color: #fff;
  padding: 20px;
  text-align: center;
  width: 100%;
  box-sizing: border-box; /* 防止padding导致宽度溢出 */
}

修改后，无论窗口如何缩放，footer都会始终固定在页面底部，且在任何显示器上都能正常工作。

内容的提问来源于stack exchange，提问作者ixonblitz