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

• • Reply
  acmedeepak

  Member

  168 Points

  497 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

  15186 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

  45489 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

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.