All geek questions in one place

Why is the iframe 100% height not working on the XHTML page?

I play with an iframe that includes a second page and just displays a short title above the iframe.

In one test setting, height="100%" worked correctly, and in another setting it did n’t, and then I noticed that the difference was the only document where iframe height was always set to 150px, it was an XHTML document, and the document in which It works, does not have a DOCTYPE set.

So this works: (the height is fully scaled to the window)

 <html> <head> </head> <body> <h1>Wrapper Header ...</h1> <hr/> <iframe src="/jenkins" width="100%" height="100%"> <p>iframes not suppoerted</p> </iframe> </body> </html>

and it’s not (height about 150 pixels or so)

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> </head> <body> <h1>Wrapper Header ...</h1> <hr/> <iframe src="/jenkins" width="100%" height="100%"> <p>iframes not suppoerted</p> </iframe> </body> </html>

Display in IE8 and FF5 is the same.

Why is it that percentage of height no longer works if I have XHTML doctrines?

+6
source share
1 answer

Because the page is displayed in standard mode with a valid DTD. The reason he was working in a different mode is because he was in quirks mode.

The reason it works in quirks mode is because browsers were very lenient and not strict in the past, and therefore people did height="100%" without specifying heights on html / body in the past.

The correct way to do this now is to set the height to html / body. Try something like html, body { height:100%; } html, body { height:100%; }

An IFrame can also be an immediate child to make this happen. Alternatively, you can install it absolutely / properly.

+13
source

Source: https://habr.com/ru/post/892839/

More articles:


All Articles