Sticky Footer + 100% Height + Margin Between Them

Question

My overall goal is make a margin between content with 100% height and a sticky footer; one that shows the body background through it.

As of now, I'm using jQuery to figure out the height of the document and subtract the height of the footer plus a margin, then apply that new size to a DIV with the ID of "content".

I then use jQuery's resize() function to also size the div if the size of the viewport changes so if a user resizes his or her browser window, or zooms in, the size of the DIV will update automatically.

Unfortunately, when I switch directions in zooming (i.e. zoom out after zooming in, and vice versa), the Javascript doesn't recognize the viewport resizing, leaving me with a too-long or too-short background on the content. In addition, this resizing does not recognize content. I'm considering setting a min-height in the CSS, but if there's a way to do it in Javascript, I'm all ears.

I will accept pure CSS-and-HTML solutions, as it seems like it should be possible, but I have exhausted myself looking for for an answer.

My current Javascript (running jQuery library 1.7.2):

$(document).ready(function(){

  var height1 = $(document).height(); // height of full document

  var height2 = 100; // height of footer plus margin

  var height_diff = height1 - height2 +"px";

  document.getElementById('content').style.height = height_diff; // Set the remaining height in test DIV.

});

$(window).resize(function () { 

  var height1 = $(document).height(); // height of full document

  var height2 = $("#footer").height(); // height of footer

  var height_diff = height1 - height2 +"px";

  document.getElementById('content').style.height = height_diff; // Set the remaining height in test DIV. 

});

Any direction is greatly appreciated.

EDIT

Got it, all without Javascript. http://jsfiddle.net/Rpdr9/610/

score 1 · Answer 1 · answered Jul 11 '12 at 06:31

1

I made something on fiddle. Looks to me like that is what you want.

Check it out: http://jsfiddle.net/XbXDn/ Orange color: content grey color : footer

The important thing is to also give your body and html the height:100%; property. As you will see, the content div auto grows (even over 100%) as you add more text, though the 25em margin between content and footer is always kept.

I deliberately took a huge margin between content and footer, just so you can see it works :)

answered Jul 11 '12 at 06:31

PoeHaH

1,936
3
28
52

http://jsfiddle.net/XbXDn/1/ I definitely appreciate the effort you put into this. I added to your JSFiddle to hopefully make it more clear what I want to do. I would like there to be "empty space" between the content and the footer so the body background will show through. I have some crazy background gradient/image action going on and I can't "fake it" by putting a background absolutely positioned at the bottom of the content or anything like that; thus I need that empty, or transparent, "margin" of sorts, or really whatever is necessary to separate the the footer and content. – jporcenaluk Jul 11 '12 at 06:44
I see.. That's a tough one. Have a look here: http://stackoverflow.com/questions/485827/css-100-height-with-padding-margin. Maybe you can combine that code with what you currently have – PoeHaH Jul 11 '12 at 06:55
I saw that one and attempted to implement it. It seemed to not work with the sticky footer; but I may not have used it correctly. I'll give it a second try. – jporcenaluk Jul 11 '12 at 07:16
Boom. Got it, all thanks to your comment. You really helped me out! – jporcenaluk Jul 11 '12 at 07:39
...Except it doesn't work when the content goes beyond the viewport. I'll keep messing with it. – jporcenaluk Jul 11 '12 at 07:57
that's what I feared. When the content goes beyond the viewport, the footer shouldn't be sticky, but should go with the content. but it's either one or the other :) or have 2 css classes and switch between them – PoeHaH Jul 11 '12 at 08:14
I was never able to get it to work correctly, so I'm forced to unaccept the answer. I greatly appreciate your help, however. I ended up giving a reasonable min-height to the content, but larger screens will be seeing a large gap between content and the sticky footer. Not a real big problem, as it doesn't affect content and it affects the aesthetics only slightly, but it's annoying anyway. I'm putting a fork in it for now. – jporcenaluk Jul 16 '12 at 03:48

Sticky Footer + 100% Height + Margin Between Them

1 Answers1