Bonjour à tous,

J'aimerais ajouter un footer à mes pages web et qui soit toujours en bas de page.  J'ai essayé pas mal de propriétés trouvées en ligne tel que 'relative:fixed ou absolute' ou même "margin-bottom: 0" mais j'ai toujours un problème, le truc c'est que même si ça marche, je vais le voir cacher une partie du contenu de la page.

Il se peut que ça soit dû au faite qu'il n'y a pas assez de contenu sur ma page (des fois il y en a pas beaucoup) mais du coup comment faire pour qu'il s'adapte à chaque fois et soit toujours en bas ?

Voilà ma partie html du footer (pour info j'utilise bootstrap) :

<footer class="navbar-inverse">
    <div class="container">
      <div class="row bottom-rule">
        <div class="col-sm-6 footer-section">
          <strong>DHCP File Configuration</strong>
          <p>Add, delete or change an entry</p>
        </div>
        <div class="col-lg-6 pull-right">
          <address>
            <strong>ADDRESS</strong><br>
            <a href="#">Contact</a>
          </address>
        </div>
        <div class="row leg-room">
            <div class="col-md-12 text-center"><hr>
        <h1 class="text-uppercase">Telecom</h1>
        <p class="monospaced">&copy; 2017</p>
    </div>
      </div>
    </div>
  </footer>

J'ai aussi une partie (pour ne pas avoir de problème avec mon 'header' qui lui est fixe) :

body { padding-top: 56px; padding-left: 5px ; padding-bottom: 75px}

Et la partie css :

footer {
    color:white;
    margin-top: 18px;
    padding-top: 20px;
    border-top: 10px solid #332e20;
    background-color: white;
}

.navbar-footer {
    background-color: inherit;
    border-radius: 0;
    border: none;
}

@media (min-width: 768px) {
    .footer-section {
        margin-bottom: 0;
        padding-bottom: 0;
     }
 }

.footer-section {
    margin-bottom: 10px;
 }

.bottom-rule {
  border-bottom: 1px solid lightgray;
}

.copyright {
    padding-left: 17px;
}

Merci d'avance !

-
Edité par Dragacode 15 décembre 2017 à 12:27:37

Bonjour,

La référence en la matière :

https://www.emmanuelbeziat.com/blog/un-site-qui-prend-toute-la-hauteur-disponible/

ChrisLebure a écrit:

Bonjour,

La référence en la matière :

https://www.emmanuelbeziat.com/blog/un-site-qui-prend-toute-la-hauteur-disponible/

Ah oui mais c'est un vrai couteau suisse ton lien, merci beaucoup !

Bonjour,

c'est un couteau suisse mais dont il faut surtout utiliser la dernière lame les premiers chapitres sont essentiellement historiques, ou si on a besoin de supporter IE8 ou 9 (spoiler : sauf à être dans une administration ou une boîte avec des clients butés, on n'a pas besoin).

Lamecarlate a écrit:

Bonjour,

c'est un couteau suisse mais dont il faut surtout utiliser la dernière lame les premiers chapitres sont essentiellement historiques, ou si on a besoin de supporter IE8 ou 9 (spoiler : sauf à être dans une administration ou une boîte avec des clients butés, on n'a pas besoin).

Ah donc le meilleur moyen c'est d'utiliser les flexbox?

PS : Il y a des gens qui utilisent encore IE ? :DDD

Oui, un certain nombre malheureusement

Oui, le meilleur moyen en attendant grid. Sauf que grid est sorti mais l'article de Manu n'est pas à jour pour ça (c'est plutôt récent). Tu peux lire l'article en lien dans "La méthode de demain".

D'accord, merci à tous !