Home > Web Front-end > CSS Tutorial > How to Position a Footer at the Bottom of the Browser in Firefox and Internet Explorer?

How to Position a Footer at the Bottom of the Browser in Firefox and Internet Explorer?

Patricia Arquette
Release: 2024-10-31 20:33:02
Original
957 people have browsed it

How to Position a Footer at the Bottom of the Browser in Firefox and Internet Explorer?

Positioning Footer at the Bottom with CSS

Many developers encounter issues when trying to position a footer at the bottom of a browser window. Despite following various techniques, the footer may appear in the middle instead. Here's a solution to this common problem for both Firefox and Internet Explorer.

CSS Code

The following CSS code will effectively stick the footer to the bottom of the browser:

<code class="css">#Footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}</code>
Copy after login

Explanation

  1. position: absolute;: Removes the footer from the normal document flow, allowing it to be positioned independently.
  2. bottom: 0;: Sets the bottom edge of the footer to zero, which positions it at the bottom of the window.
  3. width: 100%;: Ensures that the footer spans the entire width of the screen.

HTML Structure

Ensure that your HTML structure contains a

with the id="Footer" for the footer:

<code class="html"><form>
  ...
  <div class="Main" />
  <div id="Footer" />
</form></code>
Copy after login

Additional Notes

  • Setting position: fixed; for the footer may work for Firefox but not for Internet Explorer.
  • Adjusting the margin or padding of the main content (class="Main") may be necessary to make space for the footer.

By applying these CSS styles, you should be able to successfully position the footer at the bottom of the browser window in both Firefox and Internet Explorer.

The above is the detailed content of How to Position a Footer at the Bottom of the Browser in Firefox and Internet Explorer?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template