Auto height for Iframe containing embedded / published Google Doc

celalalt picture celalalt · Sep 25, 2013 · Viewed 28.8k times · Source

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:

#faq{
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="https://docs.google.com/document/..../pub?embedded=true" 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>

Answer

Radius Kuntoro picture Radius Kuntoro · Sep 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.