移动端/小窗口下网页右侧内容截断问题求助

1. 统一盒模型，避免宽度溢出 #

页面右侧截断最常见的原因是元素盒模型计算错误，导致总宽度超出容器。先在CSS开头添加全局样式，强制所有元素使用border-box盒模型：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

之后给页面最外层容器（比如包裹所有内容的<div class="container">）设置自适应居中样式：

.container {
  max-width: 1200px; /* 按需调整最大宽度 */
  margin: 0 auto;
  padding: 0 1rem; /* 左右留白，适配小屏幕 */
}

2. 移除固定宽度元素 #

检查所有元素的宽度设置，把width: 800px这类固定像素值，改成width: 100%或者max-width: 100%，让元素随父容器宽度自适应，避免小屏幕下超出范围。

3. 排查异常外边距/定位 #

查看是否有元素使用了margin-right: -20px这类负值外边距，或者position: relative配合right: -10px的定位，导致元素被推到容器外侧。直接移除这类错误设置，调整元素位置到容器范围内。

4. 避免盲目隐藏横向溢出 #

如果之前加了overflow-x: hidden到<body>或容器，先暂时移除这个属性——它只会隐藏滚动条，但并没有解决内容溢出的根本问题。用浏览器调试工具（F12）选中截断的元素，查看它的盒模型（宽度+内边距+外边距）总和，确认是否超出父容器宽度。

5. 检查媒体查询规则 #

如果写了移动端媒体查询，确认里面的样式有没有错误设置过大的宽度、内边距，或者遗漏了容器的留白规则。比如在@media (max-width: 768px)里，确保容器的左右内边距依然存在。

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