Auto height for Iframe containing embedded / published Google Doc

celalalt 09/25/2013. 6 answers, 18.326 views
html css iframe google-docs google-drive-realtime-api google-drive-realtime-api

I have an iframe with a published Google Doc. The contents of that doc are subject to change, so I want to auto adjust the height of the iframe based on its content. I found some solutions for this, but they all require access to the head of the child document. Does anyone have an idea on how to do this?

You can view an excerpt of the code I use below:

height: 800px;
overflow: hidden;
position: relative;
width: 660px;
border-top: 1px solid #90C547;
border-bottom: 1px solid #90C547;

<div id="faq"><iframe id="faqif" src="" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:900px;width:832px;position:absolute;top:-92px;left:-150px;right:0px;bottom:0px;z-index:0;" height="900px" width="832px"></iframe></div>

6 Answers

Radius Kuntoro 09/25/2013.

There's no current way to do this.

You can, however, make the height a lot larger and hide the borders, this way the iframe scrollbar won't appear and the document will appear to be a part of your website.

SW4 05/23/2017.

Simple cant


The reason is due to the cross domain policy (more, info) you cant access the iframe child document and therefore ascertain its height in order to resize the iframe accordingly, simply put

In computing, the same-origin policy is an important concept in the web application security model. The policy permits scripts running on pages originating from the same site – a combination of scheme, hostname, and port number – to access each other's DOM with no specific restrictions, but prevents access to DOM on different sites.



If you don't have control over the framed site, you cannot circumvent the cross-domain policy.


And if you cant do this, you cant do what you want because there is no way of ascertaining the child document's height.

It seems the reason you want to do this is design related. As such, you may want to look at different ways to implement the content (iframe) within your site, the obvious one being that the natural restriction on height is browser viewport height, perhaps therefore make the iframe 100% of the viewport (html, body) height? Although this will interfere with your design if there are other components on the page...but there are alternatives...the iframe could:

  1. Be aligned to one side of the page with 100% height set

  2. Be placed within a popup or modal window with 100% height/width

  3. Be controlled (JS) to stretch with the parent window, perhaps with a fixed bottom

Also remember that because this is a global restriction on this kind of content, users are not completely unused to seeing it so though it isnt an ideal design choice, it isnt necessarily one which will confuse/suprise visitors to your site.

Nj Subedi 03/25/2014.

The bad news is that the cross domain policy will not let you do that in any way around.I spent a couple hours trying to work around, which included:

  • Creating a parent DIV and fit the iframe on it
  • Trying to dynamically resize the parent DIV
  • Trying to find a library to calculate the height in Server side
  • and a lot of googling.

The best approach is to use an available library.

Download the ZIP from the following URL and follow the simple installation instructions written there.

It looks promising but I am not able to test it myself. Have a look at it and post comments if you need help.

Akshay Mohite 03/24/2014.
position: relative;
width: 832px;
border-top: 1px solid #90C547;
border-bottom: 1px solid #90C547;
height: 100%
.bgcolor_patch{position: absolute; right: 0; top:0; height: 100%; width: 20px; background: #fff; }

    $("iframe").load( function () {
        var c = (this.contentWindow || this.contentDocument);
        if (c.document) d = c.document;
        var ih = $(d).outerHeight();
        var iw = $(d).outerWidth();
            height: ih,
            width: iw

<div id="faq"><iframe id="faqif" src="" height="100%" width="832px" frameborder="0"></iframe>
<div class="bgcolor_patch"></div>

Stedman Blake 05/23/2017.

The first answer here worked for me! Full-screen iframe with a height of 100%

    <body style="margin:0px;padding:0px;overflow:hidden">
      <iframe src="" frameborder="0"
        style="overflow:hidden;height:100%;width:100%" height="100%"

Fernando 05/22/2018.

i was having the same problem. Here is The solution You have to set the body 100% 100% widht height Then the iframe display block, 100% width 100%vh Here is the final code.. sry i dont know how to put the code tag xd

`body style="margin: 0px; padding: 0px; width: 100%; height: 100%;" div style="height: 100%; width: 100%; display: block;" iframe frameborder="0" style="height: 100vh; width: 100%; display: block;" width="100%" height="100%" src=""/iframe div - Download Hi-Res Songs

1 The Chainsmokers

Beach House flac

The Chainsmokers. 2018. Writer: Andrew Taggart.
2 (G)I-DLE


(G)I-DLE. 2018. Writer: Riot Music Team;Harloe.
3 Anne-Marie

Rewrite The Stars flac

Anne-Marie. 2018. Writer: Benj Pasek;Justin Paul.
4 Ariana Grande

​Thank U, Next flac

Ariana Grande. 2018. Writer: Crazy Mike;Scootie;Victoria Monét;Tayla Parx;TBHits;Ariana Grande.
5 Clean Bandit

Baby flac

Clean Bandit. 2018. Writer: Jack Patterson;Kamille;Jason Evigan;Matthew Knott;Marina;Luis Fonsi.

Waste It On Me flac

BTS. 2018. Writer: Steve Aoki;Jeff Halavacs;Ryan Ogren;Michael Gazzo;Nate Cyphert;Sean Foreman;RM.
7 Imagine Dragons

Bad Liar flac

Imagine Dragons. 2018. Writer: Jorgen Odegard;Daniel Platzman;Ben McKee;Wayne Sermon;Aja Volkman;Dan Reynolds.
8 Nicki Minaj

No Candle No Light flac

Nicki Minaj. 2018. Writer: Denisia “Blu June” Andrews;Kathryn Ostenberg;Brittany "Chi" Coney;Brian Lee;TJ Routon;Tushar Apte;ZAYN;Nicki Minaj.
9 Brooks

Limbo flac

Brooks. 2018.
10 BlackPink

Kiss And Make Up flac

BlackPink. 2018. Writer: Soke;Kny Factory;Billboard;Chelcee Grimes;Teddy Park;Marc Vincent;Dua Lipa.
11 Diplo

Close To Me flac

Diplo. 2018. Writer: Ellie Goulding;Savan Kotecha;Peter Svensson;Ilya;Swae Lee;Diplo.
12 Rita Ora

Velvet Rope flac

Rita Ora. 2018.
13 Fitz And The Tantrums

HandClap flac

Fitz And The Tantrums. 2017. Writer: Fitz And The Tantrums;Eric Frederic;Sam Hollander.
14 Little Mix

Woman Like Me flac

Little Mix. 2018. Writer: Nicki Minaj;Steve Mac;Ed Sheeran;Jess Glynne.
15 Billie Eilish

When The Party's Over flac

Billie Eilish. 2018. Writer: Billie Eilish;FINNEAS.
16 K-391

Mystery flac

K-391. 2018.
17 Cher Lloyd

None Of My Business flac

Cher Lloyd. 2018. Writer: ​iamBADDLUCK;Alexsej Vlasenko;Kate Morgan;Henrik Meinke;Jonas Kalisch;Jeremy Chacon.
18 Backstreet Boys

Chances flac

Backstreet Boys. 2018.
19 Lil Pump

Arms Around You flac

Lil Pump. 2018. Writer: Rio Santana;Lil Pump;Edgar Barrera;Mally Mall;Jon Fx;Skrillex;Maluma;Swae Lee;XXXTENTACION.
20 Kelly Clarkson

Never Enough flac

Kelly Clarkson. 2018. Writer: Benj Pasek;Justin Paul.

Related questions

Hot questions


Popular Tags