如何正确适配页面Header 实现屏幕内完整展示无需滚动查看

问题根源 #

• 组件嵌套错误：adminHeader.php内额外包裹了一层<div class="main_content">，和主页已存在的main_content容器重复嵌套，宽度叠加偏移
• CSS规则缺失：未定义侧边栏固定定位、未做宽度自适应计算、未设置视口溢出限制，总内容宽度超出屏幕尺寸触发滚动

修复步骤 #

1. 修正adminHeader.php结构 #

删除文件内多余的main_content外层容器，只保留头部本身结构，修正后代码：

<div style="width: 100%">
    <div class="header" style="align-items: center;font-size: 17px;">
         <a style="text-decoration-line: none;">Dashboard</a>
         <div> 
         <a href="#" name="age" id="age" data-toggle="modal" data-target="#add_data_Modal"> 
            <img src="../assets/images/logo.png" width="35" height="35" style="vertical-align:middle"/> 
            <?php echo htmlspecialchars($_SESSION["username"]); ?>
         </a>
         <a href="logout.php" style="margin-left: 2em;"><i class="fa fa-toggle-left"></i> logout</a>
        </div>
    </div>
    <!-- 后续页面业务内容直接写在header标签后方即可 -->
</div>

2. 更新CSS样式 #

替换、新增以下规则，替换原有对应类的旧样式：

/* 基础视口重置，禁止横向溢出 */
html, body {
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
}

/* 外层容器占满视口 */
.wrapper{
  display: flex;
  position: relative;
  width: 100%;
  min-height: 100vh;
}

/* 侧边栏固定定位，不占文档流位置 */
.wrapper .sidebar {
  width: 220px;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  border-right: 1px solid #e0e4e8;
  padding: 20px 0;
  /* 可自行替换为需要的侧边栏背景色 */
  background: #f8f9fa;
}

/* 内容区宽度自动适配，扣除侧边栏宽度避免偏移 */
.wrapper .main_content{
  width: calc(100% - 220px);
  margin-left: 220px;
  min-height: 100vh;
}

/* 头部样式优化，滚动时固定在顶部 */
.wrapper .main_content .header{
  padding: 20px;
  background: #fff;
  color: #717171;
  border-bottom: 1px solid #e0e4e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

效果说明 #

• 修复后页面无横向溢出，所有内容自动适配屏幕宽度
• 头部固定在页面顶部，滚动内容时头部始终可见
• 侧边栏固定在左侧，和内容区无宽度叠加冲突
• 原有其他样式规则无需改动，不影响已有业务组件渲染

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