barre latérale de corps de bootstrap 3.0 pleine longueur

Je vais essayer d'obtenir bootstrap divs être la pleine longueur du corps.

C'est ce que j'ai essayé jusqu'à présent: http://jsfiddle.net/bKsad/315/

html, body {
    min-height: 100%
}
.wrap {
    height: 100%
}
.sidebar {
    background-color:#eee;
    background-repeat: repeat;
    padding:0;
    min-height:100% !important;
    position:relative;
}
.sidebar .sidebar-content {
    height:100%;
    width:100%;
    padding: 5px;
    margin:0;
    position:relative;
}

Comme la colonne de droite s'allonge, je veux que la barre latérale à faire de même.

source d'informationauteur black_rabbit

  1. 32

    La clé est de comprendre le "col-md-x" et "col-md-offset-x" styles fournis par Bootstrap 3:

    <div class="container-fluid">
 <div class="row">
  <div class="col-md-3 sidebar">
   Sidebar Content
  </div>
  <div class="col-md-9 col-md-offset-3 content">
   Main Content
  </div>
 </div>
</div>

    Puis utiliser CSS pour assurez-vous que les points d'arrêt de line-up. Vous aurez besoin d'affiner padding/margin pour vos besoins particuliers, mais le décalage et @media des points d'arrêt de la poignée de l'ensemble de la mise en page assez bien:

    html, body, .container-fluid, .row {
    height: 100%;
}

.sidebar {
  background-color: #CCCCCC;
}

@media (min-width: 992px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: block;
    background-color: #CCCCCC;
  }
}

    Solution de travail: http://www.bootply.com/111837

    Si vous utilisez "col-sm-x" ou "col-lg-x", il suffit de changer le @media CSS correspondant min-width (768px pour sm et 1200px de lg). Bootstrap se charge du reste.

  2. 1

    J'ai résolu ce problème en utilisant un positionnement absolu div et un peu de jQuery. J'ai un Bootstrap barre de navigation avec une hauteur fixe de 50px, c'est pourquoi vous voyez l'50 dans le code. Vous pouvez le supprimer si vous n'avez pas de barre de navigation en haut.

    Cette solution fonctionne de manière dynamique avec n'importe quelle hauteur.

    Le CSS:

    .sidebar {
    background-color: #333333;
    position: absolute;
    min-height: calc(100% - 50px);
}

    Le jQuery:

    var document_height = $(document).height();
var sidebar = $('.sidebar');
var sidebar_height = sidebar.height();

if (document_height > sidebar_height) {
    sidebar.css('height', document_height - 50);
}

    La chose intéressante à ce sujet est que il n'y aura pas de scintillement de l'arrière-plan en raison de son utilisation de CSS pour régler le min-height, de sorte que le jQuery, le redimensionnement qui provoque normalement un scintillement de l'arrière-plan sera caché au chargement de la page.

  3. 0

    approche 1: ajout de vide div style="clear:both" à la fin de l'envelopper div.
    http://jsfiddle.net/34Fc5/1/

    approche 2: http://jsfiddle.net/34Fc5/ :

    html, body {
    height: 100%;
}
.wrap {
    height: 100%;
    overflow: hidden;
}
.sidebar {
    background-color:#eee;
    background-repeat: repeat;
    padding:0;
    height:100% !important;
    position:relative;

}
.sidebar .sidebar-content {
    height:100%;
    width:100%;
    padding: 5px;
    margin:0;
    position:relative;
}

    ajoutée "overflow: hidden;".wrap
    changé hauteur: 100% html, body
    changé hauteur: de 100% à .encadré

    à l'aide de css façon, la hauteur de la barre latérale ne correspondent le port de la vue du navigateur. donc, si vous regardez s'approche de 1, lorsque vous faites défiler, vous remarquerez l'arrière-plan s'arrêter à la fenêtre d'affichage. pour fixer le js est nécessaire.

  4. -1

    La seule chose que vous avez du travail pour moi (après de nombreuses heures à essayer tout ce) a été

    HTML
    <nav class="col-sm-3 sidebar">

    CSS
    padding-bottom: 100%;

    Le rembourrage en pour-cent l'ont fait pour moi. Maintenant, il va tout le chemin vers le bas de la page.