页面Footer布局异常求助：侧边显示且绝对定位后无法居中

我的页面footer显示在侧边，像个容器而不是页脚。想让它自然位于页面底部，参考视频里不用设置position属性就能自动居底，但我的不行。试了设置position:absolute加手动em定位后，又出现左侧边距过大、无法居中的问题。

当前代码 #

CSS #

footer{
  color: #ffffff;
  background-color: #143774;
  text-align: center;
  bottom: -65em;
  position: absolute;
  width: 100%;
  margin: 0 auto;
}

HTML #

<body>
  <header>
    <div class="whole-container whole">
      <div class="nav-container titles">
        <a href="#" class="main-title">
          <h1 class="title">Living the social life
          </h1>
          <p class="subtitle">A BLOG EXPLORING MINIMALISM IN LIFE
          </p>
        </a>
      </div>
      <div class="nav-container navs">
        <nav>
          <ul>
            <li>
              <a href="home.html" class="current-page" style="text-decoration: none;">Home
              </a>
            </li>
            <li>
              <a href="about.html" class="nav-links">About
              </a>
            </li>
            <li>
              <a href="projects.html" class="nav-links">Projects
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
  <div class="container">
    <main>
      <article class="featured-article">
        <img
             class="main-article-img"
             src="hand-wash-warm-water.jpg"
             alt="failed to load img"
             />
        <h2 class="article-title" >Lorem ipsum
        </h2>
        <p class="article-info" >9/21/2022
        </p>
        <p class="main-text" >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
          ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. 
          <a class="direct"href="#">
            Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur.
          </a> Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <a href="#" class="direct" >CONTINUE READING
        </a>
      </article>
      <article class="sub-article">
        <div class="main-text">
          <h2  class="sub-article-title">Lorem ipsum dolor
          </h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
            enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat.
          </p>
          <a  class= "direct" href="#">CONTINUE READING
          </a>
        </div>
        <div class="image-info">
          <img
               class="sub-article-img"
               src="Practice-pic1.jpg"
               alt="failed to load img"
               />
          <p class="article-info">9/21/2022
          </p>
        </div>
      </article>
      <article class="sub-article">
        <div class="main-text">
          <h2  class="sub-article-title">Lorem ipsum dolor
          </h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
            enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat.
          </p>
          <a  class= "direct" href="#">CONTINUE READING
          </a>
        </div>
        <div class="image-info">
          <img
               class="sub-article-img"
               src="Practice-pic1.jpg"
               alt="failed to load img"
               />
          <p class="article-info">9/21/2022
          </p>
        </div>
      </article>
      <article class="sub-article" >
        <div class="main-text">
          <h2  class="sub-article-title">Lorem ipsum dolor
          </h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
            enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat.
          </p>
          <a  class= "direct" href="#">CONTINUE READING
          </a>
        </div>
        <div class="image-info">
          <img
               class="sub-article-img"
               src="Practice-pic1.jpg"
               alt="failed to load img"
               />
          <p class="article-info">9/21/2022
          </p>
        </div>
      </article>
    </main>
    <aside class="sidebar">
      <div class="widget main-widget">
        <h2 class="widget-maintitle">ABOUT ME
        </h2>
        <img  class="widget-img" src="292537123_1421294871643833_8034488637593337509_n.jpg" alt="failed to load img">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
      <div class="widget">
        <div class="recent-post">
          <h2 class="widget-maintitle">RECENT POSTS
          </h2>
          <img
               class="widget-img"
               src="itchy-eye-guy-330x220.jpg"
               alt="failed to load img"
               />
          <h3 class="widget-subtitle">Lorem ipsum dolor set amet
          </h3>
        </div>
        <div class="recent-post">
          <img
               class="widget-img"
               src="itchy-eye-guy-330x220.jpg"
               alt="failed to load img"
               />
          <h3 class="widget-subtitle">Lorem ipsum dolor set amet
          </h3>
        </div>
        <div class="recent-post">
          <img
               class="widget-img"
               src="itchy-eye-guy-330x220.jpg"
               alt="failed to load img"
               />
          <h3 class="widget-subtitle">Lorem ipsum dolor set amet
          </h3>
        </div>
      </div>
    </aside>
    <footer>
      <p>Living The Simple Life
      </p>
      <p>Copyright 2019
      </p>
    </footer>
</body>

解决方案 #

1. 修正HTML结构 #

问题核心是footer被放在了.container内部，和main、sidebar同级，大概率你的.container用了flex/grid布局，导致footer被当成了侧边栏的一部分。把footer移到.container外面，和header、container同级，恢复正常文档流位置。

调整后的HTML片段：

<body>
  <header>
    <!-- 原header内容不变 -->
  </header>
  <div class="container">
    <!-- 原main和sidebar内容不变 -->
  </div>
  <!-- footer移到container外面 -->
  <footer>
    <p>Living The Simple Life</p>
    <p>Copyright 2019</p>
  </footer>
</body>

2. 重置Footer的CSS #

去掉绝对定位和手动偏移，用flex布局实现自动居底，确保页面内容不足时footer也能贴在视口底部：

/* 给body设置flex布局，确保页面占满视口高度 */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 让container占据剩余空间，把footer挤到底部 */
.container {
  flex: 1;
}

footer{
  color: #ffffff;
  background-color: #143774;
  text-align: center;
  padding: 1.5em 0; /* 加内边距优化视觉效果 */
  width: 100%;
}

效果说明 #

• 移除绝对定位后，footer回到正常文档流，不会再跑到侧边。
• body的flex布局+container的flex:1，确保不管页面内容多少，footer都会固定在页面底部，不需要手动计算偏移量。
• 加内边距避免footer内容贴边，提升美观度。

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