HTML/CSS布局横向滚动异常排查：固定侧边栏与头部需求

导致横向滚动条的核心原因 #

• 盒模型默认行为：默认box-sizing: content-box下，元素的border不会被包含在设置的width/height内。比如你的#left-content设了15vw宽度，加上左右各1px边框，实际宽度是15vw + 2px；#right-content的85vw加上边框后总宽度超过100vw，直接触发横向滚动。
• fixed定位的header宽度问题：#header用了position: fixed且width: 100%，这个宽度是相对于整个视口的，但它应该只占右侧内容区的宽度，超出部分也会导致滚动。
• 无效的高度计算：height: 100vh - 10vh是错误写法，必须用calc()函数包裹才能生效。

修正后的完整代码 #

CSS部分

/* 全局重置盒模型，让border/padding包含在宽高内 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#left-content {
  width: 15vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  border: 1px solid black;
}

#right-content {
  width: 85vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 15vw;
  border: 1px solid black;
}

#header {
  position: fixed;
  height: 10vh;
  /* 只占右侧内容区宽度，减去左侧15vw */
  width: calc(100% - 15vw);
  left: 15vw;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  /* 给header加背景色，避免被下方内容覆盖 */
  background-color: white;
}

#center-content-footer {
  /* 使用calc计算正确高度 */
  height: calc(100vh - 10vh);
  width: 100%;
  position: absolute;
  top: 10vh;
  left: 0;
  border: 1px solid black;
  /* 给主体区域添加垂直滚动 */
  overflow-y: auto;
}

#center-content {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}

#footer {
  height: 10vh;
  width: 100%;
  position: sticky;
  bottom: 0;
  border: 1px solid black;
  background-color: white;
}

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Layout Demo</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div id="left-content">
    侧边栏内容
  </div>

  <div id="right-content">
    <div id="header">
      <h1>Header</h1>
    </div>

    <div id="center-content-footer">
      <div id="center-content">
        <!-- 这里可以添加大量内容测试滚动 -->
        <p>主体内容区域</p>
        <p>主体内容区域</p>
        <p>主体内容区域</p>
        <p>主体内容区域</p>
        <p>主体内容区域</p>
        <p>主体内容区域</p>
        <p>主体内容区域</p>
        <p>主体内容区域</p>
        <p>主体内容区域</p>
        <p>主体内容区域</p>
        <p>主体内容区域</p>
        <p>主体内容区域</p>
        <p>主体内容区域</p>
        <p>主体内容区域</p>
        <p>主体内容区域</p>
        <p>主体内容区域</p>
        <p>主体内容区域</p>
        <p>主体内容区域</p>
        <p>主体内容区域</p>
        <p>主体内容区域</p>
      </div>
      <div id="footer">
        页脚内容
      </div>
    </div>
  </div>
</body>
</html>

关键调整说明 #

1. 全局盒模型重置：添加* { box-sizing: border-box; margin: 0; padding: 0; }，让所有元素的border和padding都包含在设置的宽高中，彻底解决边框导致的溢出问题。
2. 修正header宽度：把width:100%改成width: calc(100% - 15vw)，并设置left:15vw，让header只覆盖右侧内容区，不会超出视口。
3. 修复高度计算：用calc(100vh - 10vh)替代无效的写法，确保高度计算正确。
4. 添加滚动与粘性页脚：给#center-content-footer设置overflow-y: auto实现主体区域垂直滚动，把#footer改成position: sticky，让它在滚动时固定在底部。

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