Google新站点嵌入代码出现额外滚动条的解决方法咨询

我之前也在Google新站点里碰到过这个烦人的额外滚动条问题！别慌，这大概率不是你尺寸调得不够，而是嵌入代码的样式或者组件设置的小冲突导致的，给你几个亲测有效的解决办法：

1. 清理嵌入代码的内部样式冲突 #

很多时候，你要嵌入的代码片段（比如HTML、CSS）本身自带了多余的样式，导致容器撑出滚动条：

• 检查代码里有没有overflow: auto/overflow: scroll这类属性，如果你的内容不需要滚动，直接改成overflow: hidden；
• 给代码最外层元素加上margin: 0; padding: 0; box-sizing: border-box;，这样内边距和边框不会额外占用宽度，避免内容超出容器。

2. 调整Google Sites嵌入组件的高级设置 #

Google Sites的嵌入组件藏着能控制溢出的高级选项：

• 选中嵌入代码的组件，点击右侧「编辑」按钮；
• 在弹出的窗口右上角点三个点，选择「高级」；
• 找到「溢出」选项，把默认的「自动」改成「隐藏」，这样即使内容稍有超出，也不会显示滚动条。

3. 用自定义容器包裹嵌入代码 #

如果上面的方法没用，试试把代码放进一个强制控尺寸的div容器里：

<div style="width: 100%; height: 100%; overflow: hidden; margin: 0; padding: 0;">
  <!-- 这里粘贴你原来的嵌入代码 -->
</div>

把这段包裹后的代码重新嵌入，这个div会强制占满组件容器，同时隐藏超出的内容，大概率能解决问题。

4. 检查浏览器缩放比例 #

有时候浏览器缩放（比如110%）会让容器尺寸计算出现偏差，看起来像是内容超出了。试试把浏览器缩放调回100%，看看滚动条是不是消失了。

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