HTML iframe最大高度，高度：100％不工作

我想設置iframe的高度以擴展到餘下的可用空間（即windowsHeight - menuHeight - footerHeight），如contentFrame中所使用的，這對我不起作用。它適用於高度設置爲特定像素。寬度：100％的作品。由於該應用是舊版應用，因此應該與IE 10/11，Chrome和Firefox兼容。HTML iframe最大高度，高度：100％不工作

的index.htm

<body> 
<iframe name="menuFrame" src="menu.htm" frameborder="1" style="height:40px; width: 100%;"> 
</iframe> 
<iframe name="contentFrame" src="content.htm" frameborder="1" style="height:100%; width: 100%;"> 
</iframe> 
<iframe name="footerFrame" src="footer.htm" frameborder="1" style="height:15px; width: 100%;"> 
</iframe> 
</body>

menu.htm

<body> 
menu 
</body>

content.htm

<body style="border: solid 1 black;height: 100%;"> 
content 
</body>

footer.htm

<body> 
footer 
</body>

更新謝謝大家的幫助。我測試了LGSon的唯一，這對我來說更容易理解。

來源

2016-03-21 Pingpong

身高是100％的，你認爲呢？ – Alohci

將iframe的高度擴展到可用空間的其餘部分（例如，windowsHeight - menuHeight - footerHeight） – Pingpong

使用CSS calc()使這個工作。

html, body { 
 
    margin: 0; 
 
    height: 100%;    /* need for iframe height 100% to work */ 
 
} 
 
iframe { 
 
    box-sizing: border-box; /* make the border size be included in the height */ 
 
    display: block;   /* make them block to fix white space margin */ 
 
    width: 100%; 
 
} 
 
iframe:nth-child(1) { 
 
    height: 40px; 
 
} 
 
iframe:nth-child(3) { 
 
    height: 15px; 
 
} 
 
iframe:nth-child(2) { 
 
    height: calc(100% - 55px); /* 55px = sum of menu/footer iframe height */ 
 
}

<iframe name="menuFrame" src="menu.htm" frameborder="1"> 
 
    </iframe> 
 
    <iframe name="contentFrame" src="content.htm" frameborder="1"> 
 
    </iframe> 
 
    <iframe name="footerFrame" src="footer.htm" frameborder="1"> 
 
    </iframe>

來源

2016-03-21 13:47:38 LGSon

這裏是要走的路：你必須確保一個width添加到您的iframe

。另外，將它設置爲您的iframe的display:block;值可能是一個好主意。

實施例爲100％的高度和100％的寬度的iframe直列：

<iframe src="PLACE_YOUR_URL_THERE.html" height="100%" width="100%" style="display: block;" />

當然，最好的方式是總是由CSS是否可以進行設置。但兩者都有效。

注意：在你的CSS，添加該屬性：

html, body{ 
    height: 100%; 
}

所以，你將確保你的身體和HTML標籤採用當前視口高度的100％

來源

2016-03-21 13:39:46

如果您可以自由使用calc（http://caniuse.com/#feat=calc）和視臺（http://caniuse.com/#feat=viewport-units），就可以得到中間IFRAME做，以填補剩餘的空間以下內容：

*, 
 
*:before, 
 
*:after { 
 
\t box-sizing: border-box; 
 
} 
 

 
html, 
 
body, 
 
div, 
 
iframe { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
html, 
 
body { 
 
\t height: 100vh; 
 
} 
 

 
iframe { 
 
\t display: block; 
 
\t width: 100vw; 
 
}

<iframe name="menuFrame" frameborder="1" src="" style="height:40px;"> 
 
</iframe> 
 
<iframe name="contentFrame" frameborder="1" src="" style="height:calc(100vh - 55px);"> 
 
</iframe> 
 
<iframe name="footerFrame" frameborder="1" src="" style="height:15px;"> 
 
</iframe>

來源

2016-03-21 13:57:50 Angelique

HTML iframe最大高度，高度：100％不工作

回答

相關問題