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>

Contents hide

Answers:

Method 1

DEMO:

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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):

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating