How do I know if my content takes up the whole page vertically?

Question

I have a site that I've been working on the the past couple of weeks. I have a very nice footer on it, problem is, it doesn't stay at the bottom. I've come up with a simple solution.

If the page isn't completely filled (i.e. the content only goes half way down), absolute position the footer to the bottom.

If the page is overflowing (vertically), leave the footer as just another element.

Problem is, I don't know how to check if my content is overfilled. Is there a way to check if the document fills up all the space vertically? The only thing I can think of is to check to see if the vertical scroll-bar is enabled, however, I don't know how to check for that either.

I'm using jQuery, answers with it are fine. Thanks!

EDIT

OK, my question was apparently misunderstood. Sorry guys, I don't need solutions on how to keep my footer at the bottom. I need ways of determining if data overflows on the y-axis. I happened to mention my reason why I needed to know this. Don't make me regret this guys :p

http://stackoverflow.com/questions/4814398/jquery-check-if-scrollbar-visible-div-with-overflowauto — aziz punjani, Oct 04 '11 at 21:47

score 3 · Answer 1 · answered Oct 04 '11 at 21:39

3

I've used this successfully many times over: http://cssstickyfooter.com. No JavaScript needed at all.

answered Oct 04 '11 at 21:39

Matt Ball

354,903
100
647
710

Problem is, my footer will be a variable height depending on some different things. I'd rather just have it dynamically done. – Freesnöw Oct 04 '11 at 21:42

score 2 · Accepted Answer · answered Oct 04 '11 at 21:44

2

Using jQuery, $(window).height() is how you get the height of the viewport. You can check this value against your content's height:

if($("#content").height() > $(window).height()) {
    // absolute position my footer
}

answered Oct 04 '11 at 21:44

rekamoyka

1,122
11
15

score 1 · Answer 3 · answered Oct 04 '11 at 21:44

1

Use the Sticky Footer technique like Matt posted.

The basic idea of it is that you set a static height for your footer. Make your webpage take up the full height of the browser. Push the footer off the screen from the #content div, and then move the footer back onto the page with a negative margin value.

answered Oct 04 '11 at 21:44

Chris G.

3,963
2
21
40

Problem is, just like I told Matt, my footer can't be a static height. – Freesnöw Oct 04 '11 at 21:45
You could use the same technique. Just supply the CSS values with jQuery. Use `$('#footer').height();` – Chris G. Oct 04 '11 at 21:55

score 1 · Answer 4 · answered Oct 04 '11 at 21:44

1

It's hard to answer without seeing your HTML, but if you are using jquery just use outerHeight to get the vertical size of the elements on your page and compare it to window.height

answered Oct 04 '11 at 21:44

Porco

4,163
3
22
25

score 1 · Answer 5 · answered Oct 04 '11 at 21:49

You could apply the css clearfix trick. As stated it is hard with out seeing your code. Even still this could work.

Example:

<html>
  <style>
    .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
     }
  </style>

<body>

  <div id="content" class="clearfix">
  </div>

  <div id="footer">
  </div>

</body>
</html>

This helps to keep content from overflowing and should keep your footer at the bottom or below your content.

How do I know if my content takes up the whole page vertically?

5 Answers5