ansaurus

Question

Have iFrame fill screen minus a set pixel footer

Answer 1

A:

<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>

Daryl 2010-10-28 04:14:10

@Daryl, what browser? I've tested it in IE, FF, Chrome, and Safari just to make sure. The top scroll arrow doesn't show up in a `height: 100%` case because the position ends up being `-33px top`

Emile 2010-10-28 04:22:28

@Emile My mistake. I updated it again, I've only tested it in chrome though.

Daryl 2010-10-28 04:24:33

@Emile as for the scroll bar I'm not too sure.

Daryl 2010-10-28 04:28:04

@Daryl, sorry but the scroll bar is the key to the question :)

Emile 2010-10-28 04:30:09

Answer 2

+1 A:

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"&gt;
<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.

Jason 2010-10-28 07:33:06

Tested in Chrome. Didn't get to test in anything else, it's 2:30 here and I just spent too long trying to solve it. Ha! Let me know if it works or not!

Jason 2010-10-28 07:33:59

@Jason, `table` is just as good as `div` in my book (i'd still name my first born after you), but alas it's not working. Not in Chrome, FF, IE. Basically the first row is only about 200px high (i.e., **the iFrame isn't the height of the screen minus 33px**).

Emile 2010-10-28 08:04:46

@Jason, one more thing: I copied and pasted your code, but if you're getting the right behavior, maybe the mistake is mine. Doctype? Something else? Let me know. Looks like a lot of thought in this and I thank you.

Emile 2010-10-28 08:05:52

What is your doctype? I'll look into, because it looked beautiful on Chrome.

Jason 2010-10-28 17:02:00

I have updated to fix it. This must work! haha, let me know! I was not specifying a doctype in the original.

Jason 2010-10-29 04:57:02

ansaurus

tags:

views:

answers:

Have iFrame fill screen minus a set pixel footer

related questions