整頁iframe

我需要一個頁面，其中包含一個標題和一個顯示其他網站的iframe。這裏是我使用：整頁iframe

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <style type="text/css"> 
    *{margin:0;padding:0} 
    html, body {height:100%;width:100%;overflow:hidden} 
    table {height:100%;width:100%;table-layout:static;border-collapse:collapse} 
    iframe {height:100%;width:100%} 
    .header2 {border-bottom:1px solid #000;height:90px;} 
    .content2 {height:100%} 
</style> 
</head> 
<body> 
<table> 
<tr> 
    <td class="header2"> 
    asdasdasdasd 
    </td> 
</tr> 
<tr> 
    <td class="content2"> 
     <iframe src="http://www.w3schools.com" scrolling="auto" frameborder="1" /> 
    </td> 
</tr> 
</table> 
</body> 
</html>

問題是，這個代碼不顯示完整的頁腳（90個像素是，因爲頭部分的頁面）。

來源

2012-10-19 m3hdi

不顯示頁腳的是什麼？ iframe頁面的 – RomanTheGreat

。 – m3hdi

表正在傷害我的眼睛。對此，position: absolute嚴重低估。試試這個佈局來代替：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Test Layout</title> 
     <style type="text/css"> 
      body, html 
      { 
       margin: 0; padding: 0; height: 100%; overflow: hidden; 
      } 
      #header 
      { 
       position:absolute; left: 0; top: 0; right: 0; height: 90px; background: red; 
      } 
      #content 
      { 
       position:absolute; left: 0; right: 0; bottom: 0; top: 90px; background: blue; height: expression(document.body.clientHeight-90); 
      } 
     </style> 
    </head> 
    <body> 
     <div id="header"> 
      Test content 
     </div> 
     <div id="content"> 
      <iframe width="100%" height="100%" src="startdoc.html" /> 
     </div> 
    </body> 
</html>

積分爲正確一路渲染到IE6，並在每一個我所見過最小的黑客:)測試瀏覽器

來源

2012-10-19 12:04:28

不錯的代碼，但不適用於舊版IE（IE7）。需要一些支持大多數瀏覽器的代碼。 – m3hdi

我一直沒有問題，回到IE6。 –

我會在一分鐘後發佈完整的例子，現在寫出來。 –

讓你的頭絕對定位，所以它覆蓋了iframe，像這樣：

<table> 
<tr style="position:absolute;top:5px"> 
    <td class="header2"> 
    asdasdasdasd 
    </td> 
</tr> 
<tr> 
    <td class="content2"> 
     <iframe src="http://www.yahoo.com" scrolling="auto" frameborder="1" /> 
    </td> 
</tr> 
</table>

來源

2012-10-19 12:05:17 Nelson

選擇未來將不適合我。 – m3hdi

回答

相關問題