有无的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填充屏幕减去一组像素页脚

回答

相关问题