使用React-Router的Outlet组件时，如何确保底部内容不被覆盖

问题根源在于你给底部的水平线和联系文本用了position: absolute，将它们固定在视口的特定高度位置，完全脱离了文档流。当Outlet加载的内容过长时，内容会直接从这些固定元素下方穿过，导致重叠。要让底部内容随页面内容自动下移，需要把它们改回流式布局，让浏览器正常计算页面高度。

修改步骤： #

1. 调整App组件结构

把底部联系信息放到单独的容器里，并且放在Outlet之后（页面内容渲染完成后再显示底部）：

import './App.css';
import Sidebar from './components/sidebar';
import { Outlet } from 'react-router-dom';

export default function App() {
  return (
    <div className="App" id="outer-container">
      <Sidebar />
      {/* 页面内容，Outlet加载的页面会在这里渲染 */}
      <Outlet />
      {/* 底部联系信息容器 */}
      <footer className="contact-footer">
        <hr className="footer-line" />
        <div className="contact-content">
          <p className="contact-item">Phone: +1 (XXX) XXX-XXXX</p>
          <p className="contact-item">Email: XXXXX@XXXXX.com</p>
          <p className="contact-item">Follow me on:</p>
        </div>
      </footer>
    </div>
  );
}

2. 重写底部元素的CSS

去掉所有绝对定位属性，用流式布局实现和之前一致的排列效果：

/* 底部容器整体样式 */
.contact-footer {
  margin: 2rem 23px 1rem; /* 左右间距和之前保持一致，上下添加留白 */
}

/* 底部水平线 */
.footer-line {
  border: 1px solid #000000;
  width: 100%;
  margin: 0 0 1rem 0; /* 下方留白，和联系文本分开 */
}

/* 联系内容容器，用flex横向排列 */
.contact-content {
  display: flex;
  justify-content: space-between; /* 三个元素均匀分布在容器内 */
  gap: 1rem; /* 元素间的最小间距，防止挤在一起 */
}

/* 单个联系项样式 */
.contact-item {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 95.52%;
  color: #000000;
  margin: 0;
  width: 20vw; /* 和之前的宽度保持一致 */
}

可选优化：内容短时底部固定在视口 #

如果希望页面内容较短时，底部联系信息固定在视口底部；内容过长时随内容下移，可以给外层容器添加flex布局：

#outer-container {
  min-height: 100vh; /* 确保容器至少占满整个视口高度 */
  display: flex;
  flex-direction: column;
}

/* 给Outlet的父容器添加flex:1，让内容区域占满剩余空间 */
/* 如果没有父容器，可以给Outlet包裹一个div并添加这个类 */
.page-content {
  flex: 1;
}

这样调整后，底部内容会始终跟随在页面内容的下方，不会再出现重叠问题。

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