Search code examples
htmlcssasp.netinternet-explorer-11footer

Show footer at the bottom of the page always problem with Internet Explorer 11

I'm developing an ASP.NET website with Visual Studio 2019, C# and .NET Framework 4.7

On the masterpage I have inserted this css class because all my pages have vertical scrollbar and I want to show <footer> always at the bottom of the page.

On the browsers Google Chrome and Microsoft Edge this css class working correctly, but in browser Internet Explorer 11 the footer text moves along with the web page.

How can I do it?

footer{
 position:fixed;
 bottom:0;
}

<div>
    <footer>
        <p style="font-size:20px">My Company</p>
    </footer>
</div>
Solution

  • It is actualy working fine all browser, just make sure that you set CSS correctly.

    • CSS in style in head
    • CSS inline

    DEMO:

    <!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <style>
      .p{
        height: 200vh;
        background:red;
      }
      footer{
        position:fixed;
        bottom:0;
        background: yellow;
      }
    </style>
  </head>
  <body>

    <h1>This is a Heading</h1>
    <p class="p">This is a paragraph.</p>
    <div>
        <footer>
            <p style="font-size:20px">My Company</p>
        </footer>
    </div>

  </body>
</html>

    Result on IE11 (you can I scrolled because half of title):

    enter image description here