I’m working on designing a full-page site, which will be powered mostly with javascript (ajax in particular). Right now, I’m working on the basic structure and such.
I’ve seen several questions with similar goals, but none of them really helped. Maybe I’m misinterpreting, or something. I dunno. Anyway, my goal is to create a page that takes up exactly the amount of space a user’s browser provides, without empty space on the sides or top. This means I have to rely upon percent-based measurements for my structure.
Problem is, one of the two key elements is to be a specific size, in pixels. Any bigger, and there will be space left empty and put to waste. Any smaller, and my site’s logo won’t fit. Take a look at my code:
HTML
[nav]The Beef[/nav]
[footer]The Cream Filling[/footer]
CSS
html, body{height: 100%; margin: 0; overflow: hidden; padding: 0; position: relative; width: 100%; z-index: 0;}
nav{display: block; height: 100%; position: absolute; width: 100%; z-index: 1;}
footer{bottom: 0; display: block; height: 170px; position: absolute; width: 100%; z-index: 2;}
The problem is, now the full-page navigation (as I mentioned, javascript-powered site) continues on “under” the footer. What I want it to do, is take up all of the space the footer isn’t using, without extending the page beyond the capacity of the user’s screen (IE, no scroll bars).
I’d rather not use javascript for this, but I’m willing to do so if there are absolutely no other options.
Why not specify the bottom position of the content block: