ansaurus

Question

fixed vertical positioning of css within an iframe

Answer 1

A:

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

digitaldreamer 2010-04-04 15:07:27

Hello,Thanks for the reply. Basically because I have an iframe application that lives inside of a social network my entire application must be inside of an iframe. I am trying to make my footer and header always in view of the user even when they scroll up and down the page. Any ideas?

Jake Rider 2010-04-04 15:17:54

Does the header need to be contained inside the iFrame, or just viewable to the user? I'm playing around with some options.

digitaldreamer 2010-04-04 15:20:35

Yes the header needs to be contained inside the iframe and always viewable to the user as all our markup is inside the iframe and we do not have any control outside the iframe as that is where the social network lives. I really appreciate your help to this challenging solution and look forward to your potential solutions.

Jake Rider 2010-04-04 15:28:23

Interesting problem. I'll take a crack and see if I can come up with anything that will help.

digitaldreamer 2010-04-04 15:31:21

Thanks much appreciated, do you have an aim screen name?

Jake Rider 2010-04-04 15:49:01

I've updated my answer, is this close to what you're looking for? http://digitaldreamer.net/media/examples/iframe.html

digitaldreamer 2010-04-04 15:53:58

Hello,It is close, however the footer needs to be inside the iframe as our application lives in an iframe and has no control outside the iframe. Has been a really tricky issue hopefully you can work some magic and get it to work for us!

Jake Rider 2010-04-04 16:00:39

I also have no control over the outer iframe as it is on a different domain...

Jake Rider 2010-04-04 16:06:53

So, if you have control over the iframe content, you can treat the container as an separate web page, but you already know that :). With that being the case, you can lay out your iframe content just like you'd normally do like so: http://digitaldreamer.net/media/examples/iframe.html And the site that will embed your page through the iframe will look like this: http://digitaldreamer.net/media/examples/iframe-site.html (Sorry, I didn't throw in a reset css so the spacing might be off, but you get the idea.

digitaldreamer 2010-04-04 16:13:35

Getting close...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. can it try to find a solution around that? (sorry for missing these details before)

Jake Rider 2010-04-04 16:25:39

by the bar being visible at all times I am referring to the bottom black header

Jake Rider 2010-04-04 16:35:12

another thing to note: The iframe height should be the same height as its contents so their is no need for scroll bars, hope that additional info is of help :)

Jake Rider 2010-04-04 17:33:31

Hey, Any luck? If you are able to come up with a solution I will happily send you $100 USD via paypal right away :)

Jake Rider 2010-04-04 19:45:46

ansaurus

tags:

views:

answers:

fixed vertical positioning of css within an iframe

related questions