How to Position a Footer at the Bottom of the Browser in Firefox and Internet Explorer?-CSS Tutorial-php.cn

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

901 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

position: absolute;: Removes the footer from the normal document flow, allowing it to be positioned independently.
bottom: 0;: Sets the bottom edge of the footer to zero, which positions it at the bottom of the window.
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!