Position de l'élément sensible au bas de l'écran à l'aide de CSS, HTML, et Bootstrap

Pour commencer, je suis relativement nouveau pour les CSS, Bootstrap et HTML. Je veux de la position d'un élément sensible au bas de l'écran.
J'ai donc ce code qui lui permet de se comporter de manière responsable:

<div class="col-sm-12">
    test
</div>

Mais comment puis-je l'obtenir à coller au fond de la page? J'ai déjà essayé ID/sélecteurs de Classe avec une position absolue. Il a déplacé l'élément vers le bas, mais il n'était pas plus sensible.

InformationsquelleAutor SkyboyKP | 2015-09-21
  1. 3
    <div id="my-element" class="col-sm-12">
    test
</div>

#my-element {
    position: fixed;
    bottom: 0;
}
    • Merci!!!! Travaillé perfecly pour moi ^^
    InformationsquelleAutor Destination Designs
  2. 1

    Une solution pourrait être d'envelopper l'élément souhaité dans un autre div, alors la cible de l'enveloppe de l'élément à fixer le bas de votre écran. Votre balisage pourrait ressembler à:

    <div class="fixed-container">
    <div class="col-sm-12"><!--your content here--></div>
</div><!--end .fixed-container-->

    Et vous styles pourrait ressembler à: 

    .fixed-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

    Ce serait apposer le .fixed-container élément vers le bas à gauche de la fenêtre d'affichage, puis définissez la largeur de 100% de la fenêtre d'affichage. La mise en page des règles spécifiques appliquées à .col-sm-12 reste intacte.

    InformationsquelleAutor Brad Frost
  3. 0

    Voici une solution simple à votre problème.

    Assurez-vous que vos éléments sont dans un emballage div. Puisque vous êtes en utilisant Bootstrap, utilisation:

    <div class="container-fluid">

    À l'intérieur de ce conteneur placer vos éléments/sections, y compris votre pied de page:

    <footer class="col-md-12">

    Votre pied de page doit avoir le code CSS suivant.

    footer {
       position: absolute;
       bottom: 0;
       height: 100px /* Height of your footer */
       width: 100%;
   }

    Ici est un violon. Vous pouvez voir le pied de page est au fond du récipient qui a une bordure noire.

    http://jsfiddle.net/gward90/ehf2wm83/

    InformationsquelleAutor gwar9