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?
BTW, I'm using a Windows operating system (Actually, Windows 2003 Server, but
that should not be relevant) and my browser is Firefox 8.0 and it's up to date.
I've seen this problem elsewhere, though so there may simply be something about
how iframes behave that I don't understand.
<html>
<head>
<style>
.top {
position: fixed;
z-index: 999;
left: 0;
width: 100%;
top: 0;
bottom: auto;
}
#top_id {
height: 50px;
}
.bottom {
position: fixed;
z-index: 1;
left: 0;
width: 100%;
bottom: 0;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
#bottom_id {
top: 50px;
background-color: lightGray;
}
</style>
</head>
<body>
<div id="top_id" class="top">
<p>This is the top div</p>
</div>
<iframe src="/test1.htm" name="detail" class="bottom"
id="bottom_id">
<h1>Content</h1>
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
</iframe>
</body>
</html>
______________________________________________________________________
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/
