CODEWITHSUNDEEP
css
uniquelau
uniquelau

Reputation: 1368

Position: Fixed, Relative container. Fixed height design

I have experienced a frustrating and interesting problem.

The design I am working on is based around a 100% height layout.
A site page always has an image.
Which can only ever be 800px in height.
A max-height of 100% is set on this image.

The results in a site that works nicely on large monitors, but on smaller screens the images will adjust meaning the site always fits nicely.

-

Because the site uses a horizontal scroll, I am making use of a position: fixed, on the #footer nav, to position the navigation in the bottom right.

However, when the screen has a height greater than 800px, this footer #nav remains in the bottom right corner.

I am trying to find a solution that would allow this fixed element, to be fixed, relative to the height of the container div. Meaning the navigation is always 1em above the bottom of the site layout.

-

You can see the site here - http://eastat1003.dev.voodoobytes.net/artists/bukanova/art-direction/idol-magazine-the-selected-ones/

- Edited 17th May 2012 - Site now live! http://www.eastatheart.com/

Upvotes: 1

Views: 1245

Answers (1)

will
will

Reputation: 4575

Ok, got what you are after, took me a few mins!

I haven't got time to check this now, but it should (hopefully) work.

Create a container element, set to position fixed. Position that to the top right of the screen. Set the width to 0 and height to 100%. Also set a min-height of 800px.

Now, put your nav in there set to position absolute. Then set that to bottom 1em right 0.

That should work, I think...

Hope that helps :)

Upvotes: 1

Related Questions