Home  >  Article  >  Web Front-end  >  How to Make a Footer Stick to the Bottom of the Browser Using CSS?

How to Make a Footer Stick to the Bottom of the Browser Using CSS?

Patricia Arquette
Patricia ArquetteOriginal
2024-10-31 16:37:30322browse

How to Make a Footer Stick to the Bottom of the Browser Using CSS?

How to Affix a Footer to the Browser Bottom Using CSS

When facing challenges positioning a footer at the browser's bottom, one common obstacle is its persistent appearance in the middle of the window. To resolve this issue, you can employ these CSS styles:

  • Determine the HTML structure:
<code class="HTML"><form>
...
<div class="Main" />
<div id="Footer" />
</form></code>
  • Define the related CSS:
<code class="CSS">* {
    margin: 0;
}

html, body {
    height: 100%;
}

#Footer {
    background-color: #004669;
    font-family: Tahoma, Arial;
    font-size: 0.7em;
    color: White;
    position: absolute;
    width: 100%;
    bottom: 0px;
    height: 4em;
}

.Main {
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;

    margin: 0 25% -4em 25%;

    font-family: Verdana, Arial, Tahoma, Times New Roman;
    font-size: 0.8em;
    word-spacing: 1px;
    line-height: 170%;
}</code>

These styles specify the footer's position as absolute and bottom as 0, ensuring it remains affixed to the browser's bottom.

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

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