Question

Lets say, for example, I have a container that takes up 100% of the page and then at the bottom (as part of that container) a footer. The footer is positioned on left:0px and bottom:0px.

Is there a way, using JQuery for example, to check the height of that container, and if it is below a certain amount, remove the css on the footer that positions it at 0px 0px?

Sample html:

<div class="container">
    <div class="footer">
    </div>
</div>

Sample css:

.container { width:100%; }
.footer { height:42px; position:absolute; bottom:3px; left:0px; width:100%; }

Answer 1

You can do this using jQuery as follows:

var $containerHeight = $('.container').height();
if(height < yourMagicNumberHere) {
  $('.footer').css({
    position: 'static',
    bottom: 'auto',
    left: 'auto'
  });
}