CODEWITHSUNDEEP
jquerycssfixed
Ana DEV
Ana DEV

Reputation: 1030

Have footer fixed when less content on clicks within page

How could I have footer fixed to always bottom when less content on all screens when on click content changed and have it fixed to bottom ONLY when content is less with CSS or Jquery

Upvotes: 1

Views: 41

Answers (2)

shu
shu

Reputation: 1956

Can you try the following

<html>
 <body>
  <div id="wrap">
     MY Content
  </div>
 <footer class="footer" id="appfooter">
   <div>
    MY Footer
   </div>
 </footer>
 </body>
</html>

css class(You can also add more properties according to the requirement)

 .footer {
    clear: both;
    text-align: center;
  }

In document ready 

var footerheight = $('.footer').innerHeight();
var browserheight = $(window).height() - footerheight ; //footerheight
$("#wrap").css("min-height", browserheight);

Upvotes: 1

Renuka CE
Renuka CE

Reputation: 686

I think it will help for u. by using footer{ position: fixed;z-index: 100;bottom: 0; width: 100%;} u can achieve fixed footer. 

footer {
    position: fixed;
    z-index: 100; 
    bottom: 0; 
    width: 100%;
}
<!DOCTYPE html>
<html>
<style>

</style>
<body>

<footer>
  <p>Posted by: Someone</p>
  <p>Contact information: <a href="mailto:[email protected]">[email protected]</a>.</p>
</footer>

</body>
</html>

Upvotes: 0

Related Questions