How to Make Your Footer Stick to the Bottom with CSS?

Mastering Footer Positioning with CSS: Sticking to the Bottom

When creating web pages, ensuring that the footer remains anchored to the bottom of the browser presents a common challenge. Let's delve into the solution, addressing your specific code and exploring the techniques that can help you conquer this dilemma.

One approach that often falls short is setting the footer's position to relative. This relative positioning alone is insufficient to keep the footer glued to the bottom.

Instead, try employing absolute positioning. Here's how:

<code class="CSS">#Footer {
    position: absolute;
    width: 100%;
    bottom: 0px;
}</code>

By setting the position to absolute, you detach the footer from the normal flow of the document. The width of 100% ensures it spans the entire width of the browser, while the bottom property, set to 0, anchors it to the very bottom.

Alternatively, you could use fixed positioning, which is similar to absolute positioning but keeps the element in place even when the user scrolls the page. However, fixed positioning may not be compatible with all browsers, particularly Internet Explorer.

In your specific code, modify the footer style as follows:

<code class="CSS">#Footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: #004669;
    font-family: Tahoma, Arial;
    font-size: 0.7em;
    color: White;
    height: 4em;
}</code>

By applying this change, you should now have a footer that remains firmly rooted at the bottom of the browser, regardless of the page's content length.

The above is the detailed content of How to Make Your Footer Stick to the Bottom with CSS?. For more information, please follow other related articles on the PHP Chinese website!