尝试在网页上制作 google sheet 嵌入自动大小（无需滚动）

Question

我试过使用 fit-content、fill-content、height="100%" 和 height="auto" 我不确定这是否可行，但如果不可能，google 绝对应该尝试找出一种方法让它发挥作用。

<!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>
</head>

<body>
    <iframe
        src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR-p4uEH_VDK55IPAhz94TLM03oZ40dis2blDnH_vm31QC8BaqqO0VvZU9c3u_EHS0WB8z1O92NDiae/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false"
        width="100%" height="fill-content"></iframe>
</body>

</html>

Answer 1

您无法使用内部 CSS 更改外部 iframe 的样式。与许多其他 Google 嵌入一样，Google 表格不提供让嵌入响应的选项。

Answer 2

如果您希望 iframe 填充 window 的高度，您需要将高度指定为样式，即 style="height: 100vh;" 而不是属性。

<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR-p4uEH_VDK55IPAhz94TLM03oZ40dis2blDnH_vm31QC8BaqqO0VvZU9c3u_EHS0WB8z1O92NDiae/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false" width="100%" style="height: 100vh;"></iframe>

尝试在网页上制作 google sheet 嵌入自动大小（无需滚动）

Trying to make a google sheet embed auto size (without scrolling) on the webpage

html

css

embed

google-sheets