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