設置I幀的寬度和高度爲100％按頁面大小不工作

我曾嘗試下面的代碼。但它沒有正確顯示iframe。 Iframe的高度和寬度非常小。 Iframe應該根據頁面大小獲取高度和寬度。設置I幀的寬度和高度爲100％按頁面大小不工作

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <style type="text/css"> 
     #left { 
      float: left;    
     } 

     #right { 
      float: left;   
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div > 
      <div id="left"> 
       <asp:Button runat="server" ID="b1" OnClick="b1_Click" Text="Click" /> 
      </div> 
      <div id="right"> 
       <iframe id="ifr1" runat="server" style="width: 100%; height: 100%" /> 
      </div> 
     </div> 
    </form> 
</body> 
</html>

來源

2013-05-16 user2323308

你需要對你的html和body標籤100％高度也或對IFRAME – Pete

我的身體和div標籤的高度和寬度設置爲100％的父標籤中的一個設定高度。它仍然沒有以正確的方式顯示出來。 – user2323308

有多大你想要的iframe - 如果你給特定維度以'＃right'那麼你的iframe會佔用寬度和高度。 – Pete

由於您正在浮動元素#right，並沒有給它任何寬度或高度，它將採取其內容的寬度和高度。但內容也有相對的尺寸，所以這會崩潰。

相對高度和寬度總是指相對於父元素，所以得到母體的具體高度和寬度。

來源

2013-05-16 13:13:14 bouscher

我將body和div標籤的高度和寬度設置爲100％。它仍然沒有以正確的方式顯示出來。我不想給高度和寬度px – user2323308

這是你在找什麼：http://jsfiddle.net/David_Knowles/jFVsr/

html, body {height: 100%; width: 100%; padding: 0; margin: 0; background-color: red;}

編輯：現在的iframe填充整個屏幕。

#left {float: left; width: 100%;} 
#right {float: left; width: 100%;} 
#form1 {background-color: beige; overflow:hidden; height: 100%;} 
#ifr1 {border:none; height: 100%;}

來源

2013-05-16 13:15:45 Timidfriendly

我試着上面的代碼。 iframe正在採取整頁的高度，它只能在鉻中工作，但在IE和Firefox的高度很小，另一個查詢，爲什麼iframe沒有把頁面的剩餘空間作爲寬度。 – user2323308

再看一次。我認爲這是你需要的不是嗎？ – Timidfriendly

設置I幀的寬度和高度爲100％按頁面大小不工作

回答

相關問題