Html 使iFrame填充屏幕减去设置的像素页脚_Html_Css_Iframe

Html 使iFrame填充屏幕减去设置的像素页脚

html css iframe

Html 使iFrame填充屏幕减去设置的像素页脚,html,css,iframe,Html,Css,Iframe,如何获得一个iframe来填充屏幕的高度减去底部33px的页脚空间？我需要iframe的滚动条（上下箭头）来显示。而且它必须没有Javascript（所以它可以愉快地降级：）（我在SO上发现的唯一一件事是使用padding top，这在我的情况下似乎不起作用）： /*页脚内容*/ 谢谢大家! 我让它与[喘息]一起工作，但就我而言，我无法让它与一起工作。您是对的，它正在推动滚动条。在任何情况下，在使用之前，这里都有一些东西供您使用： <body style="margin:0;padd

如何获得一个iframe来填充屏幕的高度减去底部33px的页脚空间？我需要iframe的滚动条（上下箭头）来显示。而且它必须没有Javascript（所以它可以愉快地降级：）
（我在SO上发现的唯一一件事是使用
padding top
，这在我的情况下似乎不起作用）：

/*页脚内容*/

谢谢大家!

我让它与[喘息] 一起工作，但就我而言，我无法让它与一起工作。您是对的，它正在推动滚动条。在任何情况下，在使用之前，这里都有一些东西供您使用： <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> <!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> 试验 html，正文{ 身高：100%；宽度：100%；边际：0px；填充：0px； } 桌子{ 身高：100%；宽度：100%；填充：0px；边界塌陷：塌陷；边界：无； } 运输署{ 填充：0px； } /*页脚内容*/ 注意：不要使用严格的doctype<代码>
不受支持

注：
html，body{}
是关键
也许我只是累了，但似乎填充上衣会产生相反的效果。你不想填充底部：33px，然后将页脚放在空白处吗？@Moses-
padding bottom
负责清除空白，没错。但与
height:100%
相结合，它会将iframe的滚动条推离窗口顶部。如果希望iframe的行为几乎与常规框架完全相同，为什么要使用iframe？因为我需要iframe的一些行为。底部的那个div有弹出菜单，我想部分重叠iframe内容什么浏览器？我已经在IE、FF、Chrome和Safari中对其进行了测试，以确保安全。顶部滚动箭头在
高度：100%
的情况下不显示，因为位置最终是
-33px top
@Emile My error。我又更新了一次，不过我只在chrome上测试过。@Emile至于滚动条我不太确定。对不起，滚动条是问题的关键：）在chrome上测试过。我没有做任何其他的测试，现在是2:30，我只是花了太长时间试图解决它。哈让我知道它是否有效@Jason，
table
和我书中的
div
一样好（我仍然会用你的名字来命名我的第一个孩子），但可惜它不起作用。不在Chrome，FF，IE中。基本上第一行只有大约200px高（即iFrame不是屏幕高度减去33px）。@Jason，还有一件事：我复制并粘贴了你的代码，但如果你的行为正确，可能是我的错误。博士类型？还有别的吗？让我知道。看起来这里面有很多想法，谢谢你。你的doctype是什么？我会调查的，因为它在Chrome上看起来很漂亮。我已经更新来修复它。这一定有用！哈哈，让我知道！我没有在原始文档中指定doctype。
<!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>