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

I've tried using fit-content, fill-content, height="100%", and height="auto" I'm not sure if this is possible, but if it's not google definitely should try and figure out a way to make it work.

<!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/[email protected]/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePudding user response：

You cannot change the style of an external iframe with internal CSS. Like many other Google embeds, Google Sheets does not give you the option to make the embed responsive.

CodePudding user response：

If you want your iframe to fill the height of the window, you will need to specify the height as a style, i.e. style="height: 100vh;" instead of as an attribute.

<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>