CODEWITHSUNDEEP
css
Jake Rider
Jake Rider

Reputation: 31

fixed vertical positioning of css within an iframe

I am trying to get my bottom header to stick to the bottom of the screen inside of my iframe application and have it always appear in view for the user even when the page is scrolling. I have no control over the outer iframe as it is on a different domain. The header itself must be inside of the iframe as I have no control outside the iframe. The iframe always expands to the height of its contents so that it has no scrollbars, but the bar still has to be visible in the viewport at all times.

Another thing to note: The iframe height should be the same height as its contents so their is no need for scroll bars

Upvotes: 3

Views: 11062

Answers (2)

Nighto
Nighto

Reputation: 4202

Chrome has a bug that doesn't fix elements with position:fixed if:

a) you use CSS3 transform in any element, and/or

b) you have a child element positioned outside the box of it's parent element

Oddly enough, the bug was reported back in 2009 and it's still open: https://code.google.com/p/chromium/issues/detail?id=20574

Upvotes: 1

digitaldreamer
digitaldreamer

Reputation: 55322

You might want to play around with position: fixed;

#element {
    position: fixed;
    z-index: 1000;
    bottom: 0;
}

EDIT:

I'm sorry, I think I miss understood your post. If I'm reading it correctly you want to create a header bar similar to blogger but to keep it always in view of the user when he/she scrolls.

What you can do is create a container div, and then you can nest both your header and iframe inside that container. You can then play around with the positioning, although I'm not sure if the exact behavior that you're looking for is possible without some javascript.

EDIT 2:

After playing around a bit, I got something that I think might help (if I understand your problem correctly).

http://digitaldreamer.net/media/examples/iframe-site.html http://digitaldreamer.net/media/examples/iframe.html

Upvotes: 0

Related Questions