How can I make an iframe take up 100% of its screen size? Mainly the question of height ..
I tried style='height:100%' but did not get it.
I need to put it and try as much as possible to make the iframe seem to be part of the window, one of the ways is to remove SCROLL, but for this, I need it in ALTURA to comply with 100% of the document size. Iframe.
The attached question did not help me solve my problem.
Challenge: let the iframe 100% open automatically from this code in JSFIDDLE:
Although I've already answered here Div with height 100% , I'll try to lighten up and explain the behavior, DOCTYPE to HTML5 as well as to HTML4 with Strict works the way, as well as in Quirks mode (Internet Explorer 10), basically the element root (usually) the html gets scrollbar, however this varies in Gecko, which scrollbar would be like in body , anyway when using DOCTYPE to HTML5
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
Notice the result:
I made the examples in Opera, but it's the same engine as Google Chrome, so the behavior is identical
Evenifthescrollbarispresent,theelement's"box" is with height equivalent to the content, so even if it applies height: 100% to your iframe this will not work:
Soifyouapplyheight100%totheelements
<html>and<body>theiframewillbeabletostayat100%,howeveriftheelementisinsideaDIVthatisinsidetheBODY,youwillneedtoapplyheight:100%;forDIVtoo,because100%inhtml,bodyonlyaffectschildrenofBODY,butnot"grandchildren", you also need to apply width: 100%; to elements if you need to use width in percentage iframe instead of pixels, it should look like this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, .main, .main iframe {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="main">
<iframe src="https://pt.stackoverflow.com"></iframe></div></body></html>Howeveryoumaynoticethatthereweresomemarginsintheiframeandyouwillalsonoticethatthebodyscrollbarshavebeengenerated:
Soyouhavetoremovethemargins:
html,body{margin:0;padding:0;}html,body,.main,.mainiframe{margin:0;width:100%;height:100%;}.mainiframe{border:none;/*removeasbordasdoiframes*/}Howeverdependingonthebrowser(renderingengine)itmaybethattheverticalscrollbaroftheBODY,youhavetwothingsyoucando,oradjustthebox-sizing:content-box;(itcanstillvary),butwhatprobablyitwillbemoreefficientistoremovethescrollbar,soyouwillonlyusethescrollbarofHTMLandBODYsoitwillonlyusethescrollbarfromwithintheiframe:
html,body{margin:0;padding:0;overflow:hidden;}html,body,.main,.mainiframe{margin:0;width:100%;height:100%;}.mainiframe{border:none;/*removeasbordasdoiframes*/}Thereisasimplealternativethatwillnotdependoncascadingheight:100%;,justuseposition(fixedorabsolute),notethatgeneratedscrollbariswithintheIFRAME,position:fixeddoesnotaffectthecontentandthereforedoesnotgeneratethescrollbar,differentfromposition:absolute;:
.main iframe {
border: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}<div class="main">
<iframe src="https://pt.stackoverflow.com"></iframe></div>AndersonInoticedyourcomment:
DoesitonlyworkinHTMLdocument,PHPdoesnot?Whatwillpreventitfromopening100%?
PHPdoesnothaveanythingtodowithclient-side,PHPdoesnotrunatthesametimeasHTML,PHPrunsonserver-sidein>generatestheHTMLoranyothertypeofdocumentsendstotheprogramthatworkstheHTTP(Apache,IIS,Nginx,LightTTPD,etc)andthisinturnsendsasanswerbytheinternetgenerallyandisreceivedtheHTMLalreadyprocessed,IrecommendwhichreadthesepostsImadeonthesubject:
You need to add in html css, body 100% in height so that other elements can do that.
html,body{
height: 100%;
}<iframe src="https://pt.stackoverflow.com"width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe>