如何创建无水平滚动条的1280px总宽度容器

需求说明 #

容器加上内边距的总宽度为1280px。

问题描述 #

在Chrome开发者工具中将视口调整为1280px或1140px时，页面出现水平滚动条，需解决该问题。

现有代码 #

HTML代码 #

<div class="outer-container">
  <div class="left-section">
    <nav aria-label="Page content navigation">
      <p>Menu item 1</p>
      <p>Menu item 2</p>
      <p>Menu item 3</p>
      <p>Menu item 4</p>
      <p>Menu item 5</p>
      <p>Menu item 6</p>
      <p>Menu item 7</p>
      <p>Menu item 8</p>
    </nav>
  </div>
  <div class="right-section">
    <div>
      "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness..."
    </div>
    <div>
      "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born..."
    </div>
    <div>
      "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born..."
    </div>
  </div>
</div>

CSS代码 #

body {
    background: lightgrey;
    font-family: Arial, sans-serif;
    margin: 0; /* Reset default margin */
    padding: 0; /* Reset default padding */
}

.outer-container {
    width: 1280px; /* Total container width including padding */
    padding: 20px; /* Add padding around the container */
    box-sizing: border-box; /* Include padding in the width calculation */
    margin: 0 auto; /* Center the container */
    display: flex; /* Flex layout to align sections */
    gap: 60px;
}

.left-section {
    background:grey;
    padding-left: 20px;
    width: 300px; /* Fixed width for the menu */
    box-sizing: border-box; /* Include padding and border in the width calculation */
}

.right-section {
    flex: 1; /* Fills the remaining space for content */
    box-sizing: border-box; /* Include padding and border in the width calculation */
}

@media (max-width: 768px) {
    .outer-container {
        flex-direction: column; /* Stack sections vertically on smaller screens */
    }

    .left-section {
        width: 100%; /* Full width for the menu */
        margin-bottom: 10px; /* Space between sections */
    }

    .right-section {
        width: 100%; /* Full width for content */
    }
}

解决方案 #

滚动条出现的核心原因：当视口宽度等于容器固定宽度1280px时，浏览器垂直滚动条会占用部分水平空间，导致实际可用视口宽度小于1280px，固定宽度的容器超出视口范围，从而触发水平滚动条。

推荐以下三种解决方式：

方法1：用max-width替代固定width（最优解） #

将容器的固定宽度改为最大宽度，既满足"最大总宽度1280px"的需求，又能在视口较小时自适应宽度，从根源避免溢出：

.outer-container {
    max-width: 1280px; /* 容器最大宽度为1280px，视口不足时自动收缩 */
    padding: 20px;
    box-sizing: border-box;
    margin: 0 auto;
    display: flex;
    gap: 60px;
}

方法2：添加视口适配+隐藏水平溢出 #

在HTML头部添加视口元标签，确保页面适配设备宽度，同时在body中隐藏水平溢出（仅作为临时兜底方案）：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

body {
    overflow-x: hidden;
}

方法3：新增响应式断点调整容器宽度 #

针对接近1280px的视口，单独调整容器宽度，避免溢出：

@media (max-width: 1280px) {
    .outer-container {
        width: calc(100% - 40px); /* 减去容器左右内边距的总宽度 */
    }
}

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