web-dev-qa-db-fra.com

HTML/CSS: Comment obtenir une marge fixe entre corps et pied de page

Je suis nouveau dans CSS et j'essaie de configurer une page de telle sorte qu'il y ait toujours un marge/espace fixe entre le contenu principal de la page (barre latérale/sections) et le pied de page (par exemple 120px) qui devrait fonctionner en croix -navigateur.
De plus, s'il y a très peu de contenu sur une page, le pied de page doit toujours apparaître au moins en bas de l'écran (visible).

J'ai fait plusieurs tentatives en appliquant une classe "footer", incl. le suivant, mais la marge est toujours ignorée. 

Ma structure HTML (simplifiée): 

<!DOCTYPE html>

    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <!-- ... -->
        </head>
        <body>
            <nav>
                <!-- ... -->
            </nav>
            <section id="sidebar">
                <!-- ... -->
            </section>
            <section id="main">
                <!-- ... -->
            </section>
            <footer class="footer">
                <div>Some text</div>
            </footer>
        </body>
    </html>

Mon CSS: 

.footer {
    color: #333;
    font-size: 11px;
    text-align: center;
    vertical-align: bottom
}
.footer:before {
    clear: both;
    display: block;
    height: 120px;
    min-height: 120px;
}

Quelqu'un peut il m'aider avec ça ?
Aussi, si quelque chose devait être changé concernant mon code HTML, veuillez me le faire savoir également. 

Merci d'avance, Mike

htmlcssfootersemanticsmargins
5
keewee279

Cela devrait aider:

html, body {
    height: 100%;
}
body {
    margin:0px;
    padding: 0px;
}
.wrap {
    height: auto;
    margin: 0 auto -80px; /* footer height + space */
    min-height: 100%;
    padding: 0 0 80px; /* footer height + space */
    box-sizing: border-box;
    overflow: auto;
}
.footer {
    background-color: #111111;
    color: #eeeeee;
    border-top: 1px solid red;
    height: 60px;  /* footer height */
    padding-top: 20px;
    display: block;
    margin-top: 20px; /* space between content and footer */
    box-sizing: border-box;
    position: relative;
    width: 100%;
}
<body>
    <div class="wrap">
        <nav>
            <!-- ... -->
        </nav>
        <section id="sidebar">
            <!-- ... -->
        </section>
        <section id="main">
            <!-- ... -->
            
        </section>
    </div>
    <footer class="footer">
        <div>Some text</div>
    </footer>
</body>

4
AndreiDMS

Pourquoi utilisez-vous ": before"? 

Votre css devrait ressembler à ceci:

.footer {
    color: #333;
    font-size: 11px;
    text-align: center;
    vertical-align: bottom;
    margin-top: 120px;
}

Essayez cet exemple (fonctionne bien pour moi). Si cela ne fonctionne pas - assurez-vous que vous utilisez css reset.

<!DOCTYPE html>

    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <!-- ... -->
        </head>
        <body>
            <nav style="background:grey;height:100px;">
                <!-- ... -->
            </nav>
            <section id="sidebar" style="background:green;height:100px;">
                <!-- ... -->
            </section>
            <section id="main" style="background:red;height:100px;">
                <!-- ... -->
            </section>
            <footer class="footer" style="background:blue;">
                <div>Some text</div>
            </footer>
        </body>
    </html>

<style>
.footer {
    color: #333;
    font-size: 11px;
    text-align: center;
    vertical-align: bottom;
    margin-top: 120px;
}

</style>
2
Mark

Pour ajouter une marge entre le corps et le pied de page, ajoutez simplement ceci au style de la section de pied de page: padding:20px 0px 0px 0px;

Garder le pied de page au bas est plus compliqué. Essayez quelque chose comme ça pour les CSS:

html, body {
    margin:0;
    padding:0;
    height:100%;
}

#wrapper{              /*create a div around whole html body
    min-height:100%;
    position:relative;
}

#main{
    padding-bottom:100px; /* Height of the footer element */
}

#footer {
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
    color: #333;
}
2
user4477886

il suffit de donner un style au corps avec une marge de 0px.

  body{
      margin: 0px;
  }
0
Muhammad Irfan