页面右侧越来越大的空白答案

【问题标题】：Growing white space on right side of page页面右侧越来越大的空白
【发布时间】：2020-07-06 22:23:52
【问题描述】：

我有一个响应式网站模板，我将它转换为一个 ASP.NET MVC 应用程序，在缩小浏览器窗口时它似乎有一些奇怪的行为。当我缩小窗口的宽度并低于 986 像素时，这个白色“空间”出现在内容的右侧，并随着窗口变小而继续增长（参见图片中的红色之字形）

如果您想实时查看，该网站是www.prophysique.com。我尝试使用一些开发人员工具来查看空间的来源，但似乎无法找到问题所在。任何人都可以就我可以尝试找出这个空间是从哪里生成的提出任何建议吗？

【问题讨论】：

【解决方案1】：

编辑：您的 FB 小部件是导致问题的另一个元素。它有一个固定的宽度，可以让它超出你的内容框。

.caption_style1 设置了width: 1170px。取消它会减少一些空间 - 里面的 h4 也有一些疯狂的填充和边距，但这似乎并没有减少我的空间。

在代码中的某处必须有另一个元素具有显式设置的宽度，当它小于 986 像素时，它大于浏览器窗口。

出现空白是因为指定背景颜色的元素是 100%，所以如果窗口有滚动条（由于其中一个元素的宽度大于窗口宽度），则该颜色不会t 延伸到可滚动区域。

【讨论】：

.caption.style1 的好消息...正如您所说，它似乎有所帮助，但仍有一些帮助。你最后一段是什么意思？我不太确定你想在那里解释什么。
出现滚动时右侧的空间是因为页面上有一个元素包含在另一个元素中，该元素设置了特定的宽度（就像我发现的那样）。我以前在一个网站上遇到过这个问题，我不得不查看页面上的每个元素，因为它隐藏在另一个元素中。因为外部元素（如 header）设置为 width: 100%，所以您看不到 div 扩展以容纳具有特定宽度集的内部元素。
在发布此问题并更改它之前，我注意到了 FB 小部件，但是，我还没有将它上传到实时站点。无论如何，你是对的，页脚中有一些传球导致了这样的扩展。我仍在努力，但它似乎已经修复了 99%。再次感谢！