0

I have a question about the height of the body in the iframe .

body is a block-level element，so if I don't set the height and nothing in body,the height of body is 0;

enter image description here

Now, I find that, when body in iframe, it's height is always the same as iframe.(if iframe has it's own height)

for example: a html file , iframe is empty, it's height is 500px.

body in the iframe is empty too, it's height is 500px too.

why body is empty but it's height is the same as iframe?

I see Quirks Mode in some blogs，but It will appear in html5 with <!DOCTYPE html>?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        iframe{
            width:500px;
            height:500px;
        }
    </style>
</head>

<body>
    <iframe src="" frameborder="0"></iframe>
</body>
<script>
</script>
</html>

enter image description here

Hash
  • 7,726
  • 9
  • 34
  • 53
Alen
  • 53
  • 2
  • 11
  • Seems this css property is your main BODY. its not showing your iframe's height. Can you provide jsfiddle demo so I can identify issue :) – Sanjay Kanani Sep 11 '17 at 05:21
  • Yes, your iframed document will be in quirks mode since it doesn't have a doctype, even if the container document is in standards mode. – Alohci Sep 11 '17 at 06:30
  • @SanjayKanani https://jsfiddle.net/zh4fops8/, I know body will inheriting the iframe's height. but I do not know why. Is it related to the html document type or to the W3C standard or is it related to the implementation of the browser? The code in my question is all. Nothing in body,even nothing in iframe. I just change the iframe's height by css. why body will inheriting ? body is a block-level element, if nothing in body , should it's height be 0? – Alen Sep 11 '17 at 06:34
  • @Alohciand I have just tried it. If the ifame does not have `src`,so it does not have `doctype`,so it will be in quirks mode.? If I set the attribute `src='./2.html'` ,and `2.html` has `doctype`.body's height will be true,not 100%, thanks. – Alen Sep 11 '17 at 06:43
  • That is because Body deafult display css is block which is taking with and height of parent. Change display : inline ,and inline-block . for more info look out this https://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block – Sanjay Kanani Sep 11 '17 at 06:50
  • I met another wired situation: two iframes with `src="about:blank"` and `srcdoc=""`, their content body has two different height calculated in the dev tools. And I tested another iframe with an empty page `src="empty.html"`, the height of its content body is also 0 like the empty `srcdoc` situation – PuiMan Cheui Apr 16 '21 at 06:30

1 Answers1

-1

I has the same problem before, but I can answer to your question. The body inside the Iframe took the same height because it inheriting the parent height that means iframe height whatever we defined. For example, 

<iframe width="100%" height="300px"></iframe>

So the height of the body inside of iframe would be "300px".

Prakash S
  • 132
  • 1
  • 12
  • I know body will inheriting the iframe's height. but I do not know why. Is it related to the html document type or to the W3C standard or is it related to the implementation of the browser? The code in my question is all. Nothing in body,even nothing in iframe. I just change the iframe's height by css. why body will inheriting ? body is a block-level element, if nothing in body , should it's height be 0? – Alen Sep 11 '17 at 06:35
  • The purpose of using iframe to load contents from another source, in your code tehre is no source for the iframe. iframe itself have a structure that html page has. Thats the reason the body has the same height what iframe has in your code. – Prakash S Sep 11 '17 at 07:19