Iframe/CSS：強制iframe適合屏幕

我目前正在嘗試使iframe適合我的屏幕大小，以及任何其他用戶在不同分辨率下使用它，除了不管我嘗試什麼，我最終都會iframe太小或高度過大導致雙滾動條。（iframe和頁面本身具有滾動條）。Iframe/CSS：強制iframe適合屏幕

我的目標是讓iframe只適合頁面寬度的85％（可以工作！），屏幕頂部100px（也可以），然後底部適合我的底部邊緣瀏覽器（這就是我卡住了...）

HTML

<div id="maindiv" class="maindiv"> 
<iframe id="theiframe" class="iframeautowidth" seamless src="http://whateverdomain.com></iframe> 
</div>

CSS：

.maindiv { 
width: 85%; 
top: 100px; 
} 

.iframeautowidth { 
left: 0px; 
top: 0px; 
bottom: 0px; 
width: 85%; 
height: 100%; 
border: 0 
overflow: hidden; 
display: block; 
margin: 0; 
float: left; 
}

如果它可以用於任何事情，我會在頁面上運行最新的jquery，如果它有幫助的話。提前致謝！

來源

2011-04-19 Dustin

巨大的iframe有什麼意義？ – reisio 2011-04-19 04:13:35

Tabbing系統;這樣iframe會填充除我自己頂部的100px外的所有頁面。 – Dustin 2011-04-19 04:25:21

你應該使用普通鏈接和無iframe（反而溢出區域），用_redundant_ XHR即時加載，如果你真的想要的話。 – reisio 2011-04-19 18:54:19

使用iframe的onload()事件和窗口的onresize()事件來將iframe調整爲所需的大小。

This Microsoft Support article解釋得很好。

僅供參考javascript& screen.height會給你屏幕分辨率。

來源

2011-04-19 04:00:40 Dan

'screen.width'和'screen.height'在這裏毫無用處，因爲屏幕大小**！= **可用大小到您的網頁。 – billyswong 2011-04-19 04:27:29

給我拍攝。在我的DIV和Iframe中添加了javascript和這兩個值（並切換了它們以確保我沒有困惑自己），也嘗試刪除我的CSS行以使其工作，沒有運氣。使用我的CSS，iframe可達到頁面的85％，但高度可能爲150px，而沒有我的CSS，它只是一個盒子。不知道我錯了哪裏。 – Dustin 2011-04-19 04:29:18

p.s.改爲使用innerHeight/clientHeight。 – billyswong 2011-04-19 04:46:44

如果你有Fx4，一個簡單的height: -moz-calc(100%-100px)將工作一個奇蹟。遺憾的是，這個特性在CSS3中很晚才引入並得到支持。

來源

2011-04-19 04:58:56 billyswong

我確實有fx4，不幸的是我需要儘可能使它與跨瀏覽器兼容。 > _ <雖然謝謝！ – Dustin 2011-04-19 05:07:08

如果100px頂部是用於導航iframe的標籤，則可能有解決方法。只需將您的iframe填充至100％的高度，然後將這些標籤置於的iframe中作爲另一個具有固定大小的iframe。或者只是訴諸框架。

這是否適用於您，取決於您的確切設計，但希望有所幫助。

來源

2011-04-19 05:29:58 billyswong

Iframe/CSS：強制iframe適合屏幕

回答

相關問題