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/
