Need to place the footer at the end of the page while scrolling [Answered]RSS

• • Reply
  acmedeepak

  Member

  148 Points

  456 Posts

  Need to place the footer at the end of the page while scrolling

  Feb 13, 2017 01:03 PM|acmedeepak|LINK

  Hi,

  In my website(master page), the footer actually overlaps the end content of the page. The current code is:

  <footer id="footer">
                   <span> Powered By Snuvik Technologies</span>  <span style="display:block; padding:0; text-align: right;" >Best viewed in Internet Explorer 10 and above</span>
  </footer>

  My footer CSS code is:

  #footer{ background:#f9f9fb; box-shadow:inset 0 5px 10px rgba(162,163,228, 0.35); padding:20px 25px; text-align:center; color:#7558b4; position:fixed; width:100%; left:0; bottom:0; z-index:99;}

  I need to place this footer at the very end of the page not overlap it. So, I placed an inline CSS:

   

  <footer id="footer">
                   <span style="display:block; padding:0; text-align: center"> Powered By Snuvik Technologies</span>  <span style="display:block; padding:0; text-align: right;" >Best viewed in Internet Explorer 10 and above</span>
  </footer>

  display:block; padding:0;text-align:center. But this actually overlaps the buttons at the end of my content page by which I am unable to see or use them. Please help me with a code to place the footer at the very bottom without overlapping any content in the content page.

  Regards,

  Deepak

• • Reply
  raju dasa

  All-Star

  15176 Points

  3888 Posts

  Re: Need to place the footer at the end of the page while scrolling

  Feb 14, 2017 04:54 AM|raju dasa|LINK

  Hi,

  Try updating this css rule on footer:

  position: absolute;

  or,

  try increasing the height of the container.

  Happy Coding ! Mark as Answer if it helps.
  rajudasa.blogspot.com  ||  rajudasa-tech
• • Reply
  Zhi Lv - MSF...

  All-Star

  45439 Points

  7008 Posts

  Microsoft

  Re: Need to place the footer at the end of the page while scrolling

  Feb 14, 2017 06:17 AM|Zhi Lv - MSFT|LINK

  Hi Deepak,

  acmedeepak

  Need to place the footer at the end of the page while scrolling

  Based on your code, I suggest you refer to the following code:

  Code in master page:

      <style type="text/css">
          #footer {
              background: #f9f9fb;
              box-shadow: inset 0 5px 10px rgba(162,163,228, 0.35);
              padding: 20px 25px;
              text-align: center;
              color: #7558b4;
              position: fixed;
              width: 100%;
              height:5%;
              left: 0;
              bottom: 0;
          }
      </style>
  
      <form id="form1" runat="server">
          <div >
              <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
              </asp:ContentPlaceHolder>
          </div>
          <footer id="footer">
              <span>Powered By Snuvik Technologies</span>
              <span style="display: block; padding: 0; margin-right:30px; text-align: right;">Best viewed in Internet Explorer 10 and above</span>
          </footer>
      </form>

  Code in web page:

  <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
      <style type="text/css">
          .div_footer {
              background: #f9f9fb;
              box-shadow: inset 0 5px 10px rgba(162,163,228, 0.35);
              padding: 20px 25px;
              text-align: center;
              color: #7558b4;
              position:fixed;
              width: 100%;
              left: 0;
              bottom:10%;
          }
          body{
              padding-bottom:10%
          }
      </style>
  </asp:Content>
  <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
     <div style="height:1500px; background-color:aquamarine; padding-bottom:15%">
         Content area
     </div>
      <div class="div_footer" style="" >
          <asp:Button ID="Button1" runat="server" Text="Button" />
  
      </div>
  </asp:Content>

  Then the output as below:

  

  Best regards,
  Dillion

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.