How to Fix a Footer to the Bottom of a Web Page?

How to Fix Footer to Bottom of Page

Many websites encounter the issue of having a footer that is not fixed to the bottom of the page, especially on pages with a small amount of content. To ensure that the footer remains at the bottom of the page, regardless of the screen size or content length, here is a CSS solution:

#footer {</p>
<pre class="brush:php;toolbar:false">position: fixed;
height: 50px;
background-color: red;
bottom: 0px;
left: 0px;
right: 0px;
margin-bottom: 0px;

}

This code assigns the following properties to the footer:

• position: Sets the footer's positioning to fixed, ensuring it remains in place regardless of the page's scroll position.
• height: Specifies the height of the footer.
• background-color: Adjusts the background color of the footer for demonstration purposes.
• bottom: Positions the bottom edge of the footer 0 pixels from the bottom of the page.
• left: Aligns the left edge of the footer to the left edge of the page.
• right: Aligns the right edge of the footer to the right edge of the page.
• margin-bottom: Removes any unwanted bottom margin.

To ensure that the content does not overlap the fixed footer, an additional CSS rule can be applied to the body element:

body {</p>
<pre class="brush:php;toolbar:false">margin-bottom: 50px;

}

This adds a 50-pixel bottom margin to the body, creating space for the fixed footer to be displayed.

The above is the detailed content of How to Fix a Footer to the Bottom of a Web Page?. For more information, please follow other related articles on the PHP Chinese website!