Have iFrame fill screen minus a set pixel footer
How do you get an iframe to fill up the height of the screen minus a 33px footer space at the bottom? I need the scrollbars of the iframe (both up and down arrow) to show. And it must be without Javascript (so it can degrade pleasantly :).
(The only thing I've found on SO is to use padding-top which doesn't seem to work in my case):
<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>
Thank you all!
I got it to work with [GASPS] <table> but for the life of me, I can't get it work with <div>. You are right, it is pushing the <iframe> scrollbars around. In any case, here's something for you to work with until you get it working with <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>
Notice: Don't use strict doctype. <iframe> is not supported.
PS. the html,body{} is key.
<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>
加载中,请稍侯......
精彩评论