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

user_4682551 0
Viewed 1844

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/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>
google-sheets embed css html
2 Answers

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.

user_167545890

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>

user_167155080
Related