On Wed, Dec 14, 2011 at 1:37 AM, Deighan, John <[email protected]> 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?
>
> 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.
>
What is the goal? There might be a different way to achieve it.
Since the z-index puts the #top_id in a layer above the iframe, could
you achieve the desired effect by making the iframe 100% height and
giving your #top_id an opaque background color? You would have to
make the html and body elements also 100% height for it to work. ...
html, body {
height: 100%;
}
#top_id {
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: silver;
}
#bottom_id {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
Rather than try to use the fixed positoning properties (top and
bottom) to define the height of the object, you could set a height on
html and body of 100% and then use percentage on the top element and
iframe. ...
html, body {
height: 100%;
}
#top_id {
height: 10%;
}
#bottom_id {
height: 90%;
}
There are some problems here, though. You'll lose the precise height
on the top element and borders and padding might mess up the layout.
It looks like you're trying to get a fixed header with a scrolling
body that would work on iOS < v4, but that's just a guess.
If that's it, you might want to take a look at iScroll 4. It's a very
nice solution, but it has a Javascript dependency. The result uses
overflow:hidden on all of the page elements, then uses touch events to
control the visible part of the content.
http://cubiq.org/iscroll-4
--
Ghodmode
http://www.ghodmode.com/blog
> <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/
