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