Have iFrame fill screen minus a set pixel footer_问答_开发者

Have iFrame fill screen minus a set pixel footer

开发者 https://www.devze.com 2023-01-22 21:55 出处：网络

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 Javascr

相关专题：css iframe

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>