Why iframe is bigger than body? iframe adds vertical scrollbar when 100vh

Question

Suppose I have very simple markup. I want iframe to take 100% of screen height but setting 100vh still adding scrollbar.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

iframe {
  width: 100%;
  height: 100vh;
}

<iframe scr="https://en.wikipedia.org/wiki/Main_Page"></iframe>

But I see vertical scrollbar. Why is it showing and how to get rid of it?

by default, body have padding and maging. try to make it to 0 in the iframe — Álvaro Touzón, Jul 31 '17 at 11:40

Jishnu V S · Accepted Answer · 2017-07-31T12:09:55.870

6

You can simply fix this issue , Just add a float:left or display:block to the iframe

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

iframe {
  width: 100%;
  height: 100vh;
  padding:0;
  display:block;
}

<iframe scr="https://en.wikipedia.org/wiki/Main_Page"></iframe>

edited Jul 31 '17 at 12:09

answered Jul 31 '17 at 11:47

Jishnu V S

8,164
7
27
57

Just wanted to add an answer like this.Maybe allso add a "overflow: hidden;" - but it allready should work out like a charm with this answer. – Top Questions Jul 31 '17 at 11:56
1

overflow hidden may be remove the iframe ends – Jishnu V S Jul 31 '17 at 11:58
2

Accepting answer for `display: block`. – Vadim Ovchinnikov Jul 31 '17 at 12:03
1

@JishnuVS Can you please remove `-moz-box-sizing`, `-webkit-box-sizing` and all this vendor stuff? They are for extremely old browsers. – Vadim Ovchinnikov Jul 31 '17 at 12:09

score 2 · Answer 2 · answered Jul 31 '17 at 12:00

iframe has default display: inline so changing display property to something like display: block fixes this issue.

Also if iframe is flex item (child of flex-container, adding display: flex for body in current case will make iframe a flex-item) it will also help because it will be implicitly blockified.

score 1 · Answer 3 · edited Aug 17 '17 at 10:29

1

Assuming you want it to be full screen:

Add display:block;
Add the 'allowfullscreen' attribute.

Change to:

<iframe scr="https://en.wikipedia.org/wiki/Main_Page" allowfullscreen></iframe>

edited Aug 17 '17 at 10:29

Jishnu V S

8,164
7
27
57

answered Jul 31 '17 at 11:43

Leah

336
4
14

1

Adding `allowfullscreen` didn't help me at all. Remove the height is non-sense. How it will help me to get 100% height of iframe? – Vadim Ovchinnikov Jul 31 '17 at 12:05

score 0 · Answer 4 · answered Jul 31 '17 at 11:42

0

Please check this.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

iframe {
  width: 100%;
}

<iframe scr="https://en.wikipedia.org/wiki/Main_Page"></iframe>

answered Jul 31 '17 at 11:42

chander shekhar

425
2
10

No, I want iframe to take 100% of screen height, updated question. – Vadim Ovchinnikov Jul 31 '17 at 11:45
Ok, Use float:left; – chander shekhar Jul 31 '17 at 11:50
Thanks, the only valid answer for now. Can you explain why is this happening? – Vadim Ovchinnikov Jul 31 '17 at 11:54

score -1 · Answer 5 · answered Jul 31 '17 at 11:52

-1

You cannot control the height of a cross domain content. If you try to upload an outsource html page into your html page, you cannot control the content size, only if you have access to the source content or server. Then you can add some JS and you'll not have extra scrolling.

https://github.com/davidjbradshaw/iframe-resizer

answered Jul 31 '17 at 11:52

DanielaB67

446
6
14

I'm not trying to control height of domain content. I just want `iframe` to get 100% of screen height regardless of content. – Vadim Ovchinnikov Jul 31 '17 at 11:52
that's the problem: "regardless of content". You cannot know what is the iframe content height. – DanielaB67 Jul 31 '17 at 11:54
It doesn't matter. I want to set 100% of screen height. – Vadim Ovchinnikov Jul 31 '17 at 11:56
I've tried to do what you said, make it 100 %, but you set your div 100%, it will not display the 100%. – DanielaB67 Jul 31 '17 at 11:59
maybe you'll find a solution here: https://stackoverflow.com/questions/5867985/full-screen-iframe-with-a-height-of-100 – DanielaB67 Jul 31 '17 at 12:00
The iFrame attribute does not support percent in HTML5. It only supports pixels. http://www.w3schools.com/tags/att_iframe_height.asp – DanielaB67 Jul 31 '17 at 12:06
Where do you see attribute `width` and `height` in my question? – Vadim Ovchinnikov Jul 31 '17 at 12:08
if you have vertical scroller, than is a matter of height. – DanielaB67 Jul 31 '17 at 12:11
Hey, I can't specify percentage and other than `px` unit in `iframe` in `width` and `height` **HTML attributes**, but I can specify any units in **CSS `width` and `height` properties**. Does this makes sense for you? Can you please also launch code in my question and accepted answer to see how my issue is resolved? – Vadim Ovchinnikov Jul 31 '17 at 12:15
I've sent the same explanation in comment. https://stackoverflow.com/a/27853830/3362989 Problem solved, than all good:) – DanielaB67 Jul 31 '17 at 12:34

Why iframe is bigger than body? iframe adds vertical scrollbar when 100vh

5 Answers5