Why does adding <!DOCTYPE html> shrink my web page's body?

StackOverflow https://stackoverflow.com/questions/23585767

  •  19-07-2023
  •  | 
  •  

Вопрос

I'm trying to display a full-screen iframe but the height of my website seems to be stuck at 155px; When I removed the doctype, it was magically fixed!

Try it with and without the doctype declaration:

<!DOCTYPE html>
<html>
<body>
<iframe src="http://example.com" style="border: 0; width: 100%; height: 100%"></iframe>
</body>
</html>

Why does this happen and how can I get a full-screen body while keeping the HTML 5 doctype declaration?

Это было полезно?

Решение 2

Cause (referencing comment by Frederic Hamidi): the HTML5 body is elastic on the Y-axis.

Solution: Make the body (updated:) and hmtl height 100%.

html, body{
    height: 100%;
}

Другие советы

When you remove the doctype, you put browsers into 'quirks mode' and it's like 1999 all over again as the whole box model changes. Never do that. Any results you get from removing the doctype should be ignored because it means nothing. Modern web pages require a doctype.

As far as a full screen body goes, you need to remove the margins or padding from the html and body elements which browsers will insert on their own. In addition, you set the iframe's height/width to 100% but give no reference for that 100%. In other words, 100% of what?

The answer to that question is, it's always 100% of the parent element but what is the parent elements height set to? Right now, it's nothing.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top