DIV styling such that contained IFRAME doesn't need to scroll

Question

How can I insert an iframe inside a div container such that there is never a scrollbar for the embedded iframe content (the embedded content is never very wide, but often high enough to cause a vertical scrollbar to appear).

In other words, given

<div class="embedded">
    <iframe class="embedded" src="http://xxx.yyy.zzz/content.html"></iframe>
</div>

how can I define

div.embedded { }
iframe.embedded { }

such that the embedded content is always fully visible and never uses a scrollbar?

score 1 · Answer 1 · edited May 23 '17 at 11:51

1

This should do it:

/* Hide all scrollbars for the iframe */
iframe.embedded { overflow: hidden; }

/* Hide all scrollbars for the div, but display the vertical scrollbar if content exceeds the height. */
div.embedded { overflow: hidden; overflow-y: auto; }

Here's a possibly related question on Stack Overflow

If you want the iFrame itself to grow taller for longer content, that involves Javascript and was answered in this Stack Overflow question.

edited May 23 '17 at 11:51

Community

1
1

answered Aug 09 '16 at 14:25

Ted Goas

7,051
1
35
42

1

Your idea doesn't work i think - http://codepen.io/jakub_stefko/pen/EyOANY correct me if i forgot about sth :) – Stefan Stefko Aug 09 '16 at 14:37

score 1 · Accepted Answer · answered Aug 09 '16 at 14:29

1

You could use the library http://davidjbradshaw.github.io/iframe-resizer/ to keep the iFrame sized to the content.

Example: http://davidjbradshaw.com/iframe-resizer/example/

answered Aug 09 '16 at 14:29

darkend

1,058
13
17

DIV styling such that contained IFRAME doesn't need to scroll

2 Answers2