有無的iFrame填充屏幕減去一組像素頁腳

你如何獲得一個iframe來填補畫面減去底部一個33px頁腳空間的高度？我需要iframe的滾動條（向上和向下箭頭）來顯示。它必須沒有Javascript（所以它可以愉快地降低:)。有無的iFrame填充屏幕減去一組像素頁腳

（我對這樣找到的唯一的事情就是用padding-top這似乎並不在我的情況下工作）：

<body> 
    <div style="position: fixed; width: 100%; height: 100%; bottom: 33px;"> 
     <iframe frameborder="0" noresize="noresize" src="http://google.com" 
     style="position: absolute; width: 100%; height: 100%; padding-top: 33px;"> 
     </iframe> 
    </div> 
    <div style="height: 33px; bottom: 0px; position: absolute; background: red;"> 
     /* Footer Content */ 
    </div> 
</body>

謝謝大家！

來源

2010-10-28 Kyle

也許我只是累了，但它似乎是填充頂部將有相反的預期的效果。你不想padding-bottom：33px，然後將頁腳放在那個空白處？ – Moses 2010-10-28 04:20:28

@Moses - 'padding-bottom'負責清理空白，真實。但結合'height：100％'，它會將iframe的滾動條從窗口頂部推出。 – Kyle 2010-10-28 04:31:05

爲什麼你要使用iframe，如果你想它的行爲幾乎完全像常規幀？ – Quentin 2010-10-29 05:11:21

我得到了它與[喘氣] <table>工作，但我用我的生命，我不能讓它與<div>工作。你是對的，它正在推動滾動條。在任何情況下，這裏的東西給你用，直到你得到它<div>工作的工作：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Test</title> 
<style type='text/css'> 
html, body{ 
    height:100%; 
    width:100%; 
    margin:0px; 
    padding:0px; 
} 
table{ 
    height:100%; 
    width:100%; 
    padding:0px; 
    border-collapse:collapse; 
    border:none; 
} 
td{ 
    padding:0px; 
} 
</style> 
</head> 

<body> 
    <table> 
     <tr> 
      <td> 
       <iframe frameborder="0" noresize="noresize" src="http://google.com" style="display:block; width:100%; height:100%; overflow-y:scroll; margin:0px; padding:0px;"></iframe> 
      </td> 
     </tr><tr> 
      <td style='height:33px;'> 
       <div style="height: 33px; width:100%; bottom: 0px; position: absolute; background: red;"> 
        /* Footer Content */ 
       </div> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

注意：不要使用嚴格的doctype。不受支持。

PS。 html,body{}是關鍵。

來源

2010-10-28 07:33:06 Jason

。沒有得到任何其他測試，現在是2點半，我花了太長時間試圖解決它。哈！讓我知道它是否有效！ – Jason 2010-10-28 07:33:59

@Jason，'table'是一樣'在我的書中div'一樣好（我的名字還是我第一次在你出生），但可惜它不工作。不在Chrome，FF，IE中。基本上第一行只有大約200px高（即，** iFrame不是屏幕高度減去33px **）。 – Kyle 2010-10-28 08:04:46

@Jason，還有一件事：我複製並粘貼了你的代碼，但是如果你的行爲正確，那麼可能是我的錯誤。文檔類型？還有別的嗎？讓我知道。在這個看起來像很多想法，我感謝你。 – Kyle 2010-10-28 08:05:52

<body style="margin:0;padding:0;> 
    <div style="position:relative; top:0; right:0; bottom:33px; left:0;"> 
     <div style="width: 100%; height: 100%; bottom: 33px; position:fixed"> 
      <iframe frameborder="0" noresize="noresize" src="http://google.com" 
      style="position: absolute; width:100%; height:100%; overflow-y:scroll"> 
      </iframe> 
     </div> 
    </div> 
    <div style="height: 33px; width:100%; bottom: 0px; position: absolute; background: red;"> 
     /* Footer Content */ 
    </div> 
</body>

來源

2010-10-28 04:14:10 Daryl

什麼瀏覽器？我已經在IE，FF，Chrome和Safari中進行了測試，以確保它。由於位置最終被'-33px top' – Kyle 2010-10-28 04:22:28

@Emile我的錯誤100％'情況：頂部滾動箭頭並不在'高度顯示出來。我再次更新它，但我只是在Chrome中進行了測試。 – Daryl 2010-10-28 04:24:33

@Emile至於滾動條我不太確定。 – Daryl 2010-10-28 04:28:04

有無的iFrame填充屏幕減去一組像素頁腳

回答

相關問題