web-dev-qa-db-fra.com

barre latérale de bootstrap 3.0 pleine longueur

J'essaie de faire en sorte que les divs bootstrap aient la longueur de leur 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;
}

À mesure que la colonne de droite s'allonge, je souhaite que la barre latérale fasse de même. 

responsive-designtwitter-bootstrap-3htmlsidebar
18
black_rabbit

La clé est de comprendre les styles "col-md-x" et "col-md-offset-x" 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>

Ensuite, utilisez CSS pour vous assurer que les points d'arrêt sont bien alignés. Vous devrez affiner le remplissage/la marge en fonction de vos besoins particuliers, mais les points d'arrêt offset et @media gèrent assez bien la disposition générale:

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 vous suffit de changer le @media CSS en min-width correspondant (768px pour sm et 1200px pour lg). Bootstrap gère le reste.

33
pjfamig

J'ai résolu ce problème en utilisant une div parfaitement positionnée et un peu de jQuery. J'ai une barre de navigation Bootstrap avec une hauteur fixe de 50px, c'est pourquoi vous voyez les années 50 dans le code. Vous pouvez l'enlever si vous n'avez pas de barre de navigation supérieure.

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 à propos de cela est qu'il n'y aura pas de scintillement de l'arrière-plan car il utilise CSS pour ajuster la hauteur minimale, de sorte que le redimensionnement jQuery qui provoque normalement un scintillement de l'arrière-plan sera masqué lors du chargement de la page.

1
kjdion84

La seule chose qui a fonctionné pour moi (après de nombreuses heures à tout essayer) était 

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

CSS padding-bottom: 100%;

Le rembourrage en pourcentage l'a fait pour moi. Maintenant, ça va jusqu'au bas de la page.

0
Yoko

approche 1: ajout d'un div vide avec style = "clear: both" à la fin de la division wrap . 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é "débordement: caché;" à .wrap a changé de taille: 100% en html, corps a changé de hauteur: 100% en .sidebar

en utilisant css, la hauteur de la barre latérale correspond uniquement au port d'affichage du navigateur. Donc, si vous regardez l'approche 1, lorsque vous faites défiler, vous remarquerez que l'arrière-plan s'arrête à la fenêtre. pour le corriger js est nécessaire.

0
Shadow_boi