CODEWITHSUNDEEP
jqueryhtmlcss
ediblecode
ediblecode

Reputation: 11971

Anyway to check for container height and change CSS accordingly?

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%; }

Upvotes: 0

Views: 447

Answers (2)

Taylor Dondich
Taylor Dondich

Reputation: 658

You can do this using jQuery as follows:

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

Upvotes: 2

Supr
Supr

Reputation: 19022

Is that really necessary though? Is there something wrong with the following?

.container { }
.footer { height:42px; margin-bottom: 3px; }

The footer is still gonna be at the bottom/end of the container.

Upvotes: 0

Related Questions