How to make the iframe height 100% inside div using only html inline style

Question

With the current code below, it gives me a scrollbar, but instead, I want the full webpage to show. It seems to work if I change the height from 100% to 1150px, but I want it to be dynamic, hence, want to make it 100%. The width seems to be working fine with 100%, just not the height.

<div style="overflow:auto;-webkit-overflow-scrolling:touch; border:1px solid black">
<iframe src="http://help.websiteos.com/websiteos/example_of_a_simple_html_page.htm" 
style="width:100%;height:100%"></iframe>
</div>

*With the current code below, it gives me a scrollbar, but instead, I want the full webpage to show.* What if the full page is larger than the `viewport` ? a scrollbar will have to be introduced to enable the user access to the rest of the page, Don't you think ? — Rainbow, Sep 18 '19 at 19:51
The full page is not larger than the viewport because I can make it work with 1150px. — canucksfan96, Sep 18 '19 at 22:04
Well that only your viewport you can't assume everyone has the same dimensions as you because it's not, if you'd like to know when i try `height:1150px` i still get scrollbars — Rainbow, Sep 19 '19 at 10:44

A. Meshu · Answer 1 · 2019-09-19T05:19:56.353

0

<iframe> initial style is with border. Set the border to 0 and that's it. Example:

<div style="overflow:auto;-webkit-overflow-scrolling:touch; border:1px solid black;">
  <iframe src="http://help.websiteos.com/websiteos/example_of_a_simple_html_page.htm" style="width:100%;height:100%; border: 0;"></iframe>
</div>

EDIT

If you want to hide scroll whatsoever you need to style the <body> tag as well (set margin: 0; and use the overflow:hidden). Now you don't need the wrapping div at all:

<body style="margin:0; overflow: hidden">
  <iframe src="URL" style="width: 100vw; height: 100vh; border: 0;"></iframe>

edited Sep 19 '19 at 05:19

answered Sep 18 '19 at 18:49

A. Meshu

4,053
2
20
34

It still gives me the scrollbar. I want it to fully display without having to scroll up/down. – canucksfan96 Sep 18 '19 at 19:15
Do you mean the inner scroll on the iframe? you can add overflow:hidden to it, but note that you won't be able to scroll the content. – A. Meshu Sep 18 '19 at 19:20
related: https://stackoverflow.com/questions/7398142/overflow-hidden-doesnt-work-on-chrome-with-iframes – A. Meshu Sep 18 '19 at 19:21
That is not what I am looking for. Yes, I do want to hide it, but at the same time, the full page should display without having to scroll. – canucksfan96 Sep 18 '19 at 22:12
I edit the answer with full screen iframe without scroll option. – A. Meshu Sep 19 '19 at 05:23
For some reason, I'm still getting the scroll option with your edited answer. – canucksfan96 Sep 19 '19 at 19:00
The document scroll? if you mean the iframe scroll try add overflow:hidden inside the inline iframe style. – A. Meshu Sep 19 '19 at 19:13

score 0 · Answer 2 · answered Sep 18 '19 at 18:53

0

It is a bad practice to use inline style, I recommend using a css class to apply these styles

.iframeStyle{
  width:100%;
  height:100%; 
  border: 0;
}

.divIFrame{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid black;
}

<div class="divIFrame">
  <iframe src="http://help.websiteos.com/websiteos/example_of_a_simple_html_page.htm" class="iframeStyle"></iframe>
</div>

answered Sep 18 '19 at 18:53

Lucas

275
8
37

Agree, but OP did ask for inline-style. Anyway it's the same solution that i suggest - doesn't it? (: – A. Meshu Sep 18 '19 at 18:54
It still gives me the scrollbar. I want it to fully display without having to scroll up/down. – canucksfan96 Sep 18 '19 at 22:15

score 0 · Answer 3 · answered Sep 18 '19 at 19:06

0

Use 100vh for height if you are targeting newer browsers that supports vh measurement.

<iframe style="height:100vh;width:100%" />

answered Sep 18 '19 at 19:06

XPD

1,121
1
13
26

This won't solve it, now you need to omit div's border as well. – A. Meshu Sep 18 '19 at 19:15
It still gives me the scrollbar. I want it to fully display without having to scroll up/down. – canucksfan96 Sep 18 '19 at 19:16
would work, but internal page css takes over responsive, now if the height and is declared, then it could be scaled. that could be done with jquery or javascript. could use a bootstrap responsive method, which would be using a jquery script in its library. – drtechno Sep 18 '19 at 19:29

How to make the iframe height 100% inside div using only html inline style

3 Answers3