如何实现谷歌表格嵌入网页后自动适配尺寸 无需显示滚动条

核心失效原因 #

你尝试的属性不生效的核心原因有两点：

• <iframe> 原生 height 属性不支持 fit-content/fill-content 这类CSS逻辑值，仅支持固定像素值、百分比值；百分比值生效的前提是父级元素（html、body）有明确声明的高度值，否则会失效
• 谷歌表格与你的站点属于跨域场景，浏览器安全策略禁止主站直接读取iframe内部的实际内容高度，因此无法通过普通CSS实现高度自动适配

可行实现方案 #

方案1：固定高度适配（适合内容固定的表格） #

先单独打开你要嵌入的谷歌表格链接，手动测量实际内容的总高度，直接给iframe设置固定高度，同时禁用滚动条即可，修正后代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
        crossorigin="anonymous"></script>
    <title>Document</title>
    <style>
        .google-sheet-iframe {
            border: none;
            overflow: hidden;
            width: 100%;
            /* 替换为你实际测量的表格内容总高度 */
            height: 720px;
        }
    </style>
</head>
<body>
    <iframe
        src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR-p4uEH_VDK55IPAhz94TLM03oZ40dis2blDnH_vm31QC8BaqqO0VvZU9c3u_EHS0WB8z1O92NDiae/pubhtml?gid=0&single=true&widget=true&headers=false&rm=minimal"
        class="google-sheet-iframe"
        scrolling="no">
    </iframe>
</body>
</html>

嵌入链接末尾新增的&rm=minimal参数可以隐藏谷歌表格的多余操作栏，减少不必要的高度占用

方案2：动态适配（适合内容会变动的表格） #

受跨域限制无法直接读取iframe高度，你可以通过谷歌Apps Script将表格数据封装成自定义接口，在你的页面拉取数据后自行渲染为表格，可完全自主控制样式和尺寸，不会出现滚动条问题。

官方支持说明 #

目前谷歌表格官方嵌入接口确实没有提供原生的高度自适应参数，你可以通过谷歌官方反馈渠道提交相关功能需求。

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