固定的页眉/页脚，可滚动的内容，上方/下方的空间

Question

I've seen several similar questions to this (and done plenty more research) but I don't think any of them provide a solution to this specific problem...

I made a quick example of what I mean here: https://gist.github.com/anonymous/62bb6b6e405549a36ae9

That's not the actual code I'm using (since I am working with WordPress) but it's illustrative of my issue, which is, specifically:

I am working on a site which will have a fixed Header and Footer, with content in between. I've already done so, it works fine. However, I do NOT want the Header and Footer to be touching the top and bottom of the browser (they'll have, for example, a 20px margin on them, so there won't be a lot of space between the containers and the browser).

The problem is that when you scroll the page, the content is visible in the space between the header/browser, and the footer/browser. As in, you can see it scrolling above the header and below the footer; I'd like to avoid this.

Is there some way to style the content container in a way that won't make it show above the header/below the footer?

At the moment I'm using a background image on the Header and Footer, and pushed them up against the edge of the browser; but it's very design-restrictive and I don't want to lock myself into doing it that way.

NOTE: My specs for this project are that the background must be very image-heavy, which is why I'm particular about the header and footer. It's really restricting the images that we can use because we have to assume that the detailed background is getting cut off, and we can't control how it cuts -- meaning I can't just cut the header and footer into images to "fake" this look.

Answer 1

Instead of using a margin, can you just use a div container that is fixed position.

#whitebox {position:fixed; margin-top:-20px; background-color:blue;width:100%;height:24px;}

See example based off your code . Just make the color white or whatever is your background color.

Answer 2

If you are allowed to use jquery. you can calculate the distance between the fixed boxes and place your content there.

I added an inner div to fill the fixed content div.

Slight css changes.

Fiddle here

var topOffset = $('#header').offset().top + 30;
var bottomOffset = $('#footer').offset().top;
var distance      = (bottomOffset - topOffset);
$("#content").css("height", distance);

UPDATE You might also consider recalculating when the browser is resized Turn above code into a function and then call from resize as well

JQuery Resize

$( window ).resize(function() {
  $( "#log" ).append( "<div>Handler for .resize() called.</div>" );
});