fix footer at bottom using jQuery

Question

I want to fix my footer at the bottom gap. If content is less footer is coming up and content full problem solved and the footer should fix at bottom while I will zoom in or zoom out. But when I zoom the footer will go to content part

    <head runat="server">
        <asp:contentplaceholder id="HeaderContent" runat="server"></asp:contentplaceholder>
    </head> 

    <body class="hidden-sn white-skin backcolor">
    <form id="form1" runat="server">
    <main>
    <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"></asp:contentplaceholder>
    </main>
    <!--main layout-->
    <!--footer-->
    <footer id="footer" style="position:relative;bottom: 0;left: 0;width: 100%; height: 50px;text-align: center; color: rgba(255, 255, 255, 0.6); line-height: 50px; overflow: hidden; font-size: 0.9rem; background-color: rgba(62, 69, 81, 0.3)">
        <div class="footer-copyright">
            <div class="container-fluid">
                © copyright 2016 transgraph consulting pvt.ltd, all rights reserved.
            </div>
        </div>
    </footer>
    </body>
    </html>

This is my master page.

    position: relative ---> if content is less coming up.
    position: absolute and fixed ----> if content is more getting on content. 


var docHeight = $(window).height();
          var footerHeight = $('#footer').height();
           var footerTop = $('#footer').position().top + footerHeight;
          if (footerTop < docHeight) {
               $('#footer').css('margin-top', 0 + (docHeight - footerTop) + 'px');
            }

I used jQuery to fix it. fix my footer at the bottom. Suggest me to solve this problem using CSS or jQuery.I want to fix my footer at the bottom gap. If content is less footer is coming up and content full problem solved and the footer should fix at bottom while I will zoom in or zoom out. But when I zoom the footer will go to content part

Possible duplicate of [How to keep footer at bottom of screen using jQuery](https://stackoverflow.com/questions/36397087/how-to-keep-footer-at-bottom-of-screen-using-jquery) — Arya Aghaei, Apr 04 '18 at 07:22

score 0 · Answer 1 · answered Apr 04 '18 at 07:35

CSS Sticky Footer without Jquery

CSS:

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.demo h1 {
  margin-top: 0;
}

/**
 * Footer Styles
 */

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

HTML:

<div class="demo">
  <h1>CSS “Always on the bottom” Footer</h1>

  <p>Text</p>

  <p>text</p>

  <p>text</p>

  <p>text</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

score 0 · Answer 2 · answered Apr 04 '18 at 07:54

0

Why not use bootstrap? It's more easy. Links: w3school examples, youtube tutorial

answered Apr 04 '18 at 07:54

Mitca Vicentiu

196
1
14

score 0 · Answer 3 · answered Apr 04 '18 at 07:57

Here check this code it would be Help you to make fixed footer at bottom and should be fix while you zoom out or zoom in

<div class="content">
<h1>Some Thing You Want to do</h1>
</div>
<footer class="footer">Footer</footer>

html, body {
height: 100%;
margin: 0;
}
.content {
padding: 20px;
min-height: 100%;
margin: 0 auto -50px;
}
.footer,
.push {
 height: 50px;
}

* {
box-sizing: border-box;
}
body {
font: 16px Sans-Serif;
}
h1 {
margin: 0 0 20px 0;
}
p {
margin: 20px 0 0 0;
}
footer {
background: #42A5F5;
color: white;
line-height: 50px;
padding: 0 20px;
}

Here You Can Find Demo Link is https://jsfiddle.net/kingtaherkings/08tb0fsm/1/

fix footer at bottom using jQuery

3 Answers3