Hmm, maybe you could put the iframe inside a div and position/size the
div the way you want?
Deighan, John wrote:
Thanks for your attempt to help, but in fact, I do not want the iframe to be
the height of the viewport. I want the top of the iframe to be N pixels down
from the top of the viewport, and for the bottom of the iframe to be at the
bottom of the viewport. I have set the height to 100%, but since the top is N
pixels down from the top of the viewport, the bottom ends up also N pixels down
from the bottom of the viewport, which hides part of the contents, not to
mention the bottom of the scrollbar, so that doesn't work. I will look over the
documentation you mention in case some solution can be found
________________________________________
From: Philippe Wittenbergh [[email protected]]
Sent: Tuesday, December 13, 2011 8:05 PM
To: Deighan, John
Cc: [email protected]
Subject: Re: [css-d] iframe troubles
On Dec 14, 2011, at 2:37 AM, Deighan, John wrote:
For some reason, when I try to create a position:fixed iframe element, it gets an arbitrary height
instead of filling to the bottom of the viewport as I think it should. A sample HTML page is below.
The only change I've made from the version I'm using for testing is that I removed many lines like
"<p>This is paragraph N</p>" to shorten this message. You can simply duplicate
the existing line to create more content.
In fact, I should explain the content since being inside an iframe element, it won't display anyway.
The point is that to test whether I had the CSS top, bottom, etc. properties correct, I took the file
below and simply changed <iframe> to <div> and </iframe> to </div>. When I do
that, the div fills the screen, whereas when it was an iframe, it got an arbitrary (and small) height
instead. Of course, when it's a div, it displays the content in the code below, whereas when it's an
iframe, it uses the 'src' attribute to fetch content (you can use any arbitrary HTML file as content
when it's an iframe). So, the exact same file, but with only changing one element between a div and an
iframe, results in a drastically different layout. Can anyone explain this?
<iframe> is an inline replaced element (a bit like <img>); as such, the rules for computing
the height and the positioning coordinates are slightly different than for block level elements such as
<div>. <iframe> has an intrinsic height (by default 150px).
In the case of <iframe>, CSS2.1:10.6.5 applies:
http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height
(position: fixed is just a special variant of position: absolute)
If I understand correctly, you want an <iframe> the height of the viewport. Try
with
iframe { height: 100%; }
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
--
David
[email protected]
authenticity, honesty, community
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
