如何解决Google Sites页面在移动端出现不必要垂直滚动的问题？

• 元素溢出视口：检查图片、容器等元素是否未设置max-width: 100%导致横向溢出，或是高度设置超出移动视口，这类溢出常会连带触发垂直滚动。
• 默认样式未重置：浏览器对body、html标签默认带有margin或padding，若未通过body, html { margin: 0; padding: 0; }重置，会额外占据垂直空间。
• 隐藏元素占位：设置visibility: hidden或opacity: 0的元素仍会保留布局高度，检查是否存在这类未彻底移除的冗余元素。
• 视口标签配置错误：确认页面的<meta name="viewport">是否正确设置为<meta name="viewport" content="width=device-width, initial-scale=1.0">，错误的视口设置会导致页面渲染尺寸异常。
• 动态脚本影响：排查是否有JS代码动态添加元素、修改元素高度或定位，导致页面总高度超出视口。
• CSS滚动属性误设：检查是否给容器或根元素设置了overflow-y: scroll（强制显示滚动条），或是min-height值过大导致布局高度冗余。

快速调试方法 #

• 用浏览器开发者工具开启移动端模拟模式，查看body/html的总高度，逐个检查元素的盒模型，定位溢出的节点。
• 临时添加全局样式* { border: 1px solid red; }，直观找出超出视口边界的元素。

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