如何修改HTML代码让Google网站嵌入块适配屏幕，避免滚动小窗口？

问题原因 #

Google Sites的HTML嵌入容器默认会给嵌入内容设置固定最小尺寸，当屏幕缩小时，容器无法自适应拉伸，就会出现带滚动条的小窗口。

修改方案 #

给嵌入的HTML添加基础样式，强制内容跟随容器宽度自适应，取消固定尺寸限制：

<!DOCTYPE html>
<html>
<head>
<style>
/* 重置默认样式，消除内外边距 */
html, body {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}
/* 确保段落文本自动换行 */
p {
  word-wrap: break-word;
  white-space: normal;
}
</style>
</head>
<body>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</body>
</html>

关键说明 #

• width: 100% !important：强制HTML和body宽度占满嵌入容器，不使用固定尺寸
• margin: 0 !important、padding: 0 !important：消除默认内外边距，避免内容被挤压
• overflow-x/y: visible !important：取消滚动条强制显示，让内容自然溢出，由Google Sites全局滚动条处理
• word-wrap: break-word：确保长文本自动换行，不会横向溢出

如果要实现图片环绕文本的功能，只需在这个基础样式上添加布局代码即可，比如给图片设置float: left或float: right，同时给段落添加合适边距，不会影响自适应效果。

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