Bootstrap 3 - fixe la barre latérale problème de mise en page

Je suis novice dans le bootstrap ,
Je suis en train de concevoir un panneau d'admin, heres la DÉMO .

Je veux faire de la barre latérale hauteur également dépendre de droite le contenu de la div.
.j'.e (bar à côté de la couleur de fond gris).

Balisage Html : (voulons aussi savoir si ma structure html est bon)

   <!-- Headder row -->
    <div class="row">
       <div class="navbar"> .....  </div>
    </div>

 <!-- Content row -->
    <div class="row">
        <!-- SIDEBAR Open -->
        <div id="sidebar-left" class="col-2 col-lg-2">
            ....
       </div>
   <!-- right content box -->
     <div id="content-right" class="col-lg-10 container" >
      ......
    </div
   </div>


<!-- Footer row -->
    <div class="row">
      ......   
    </div>

Résultat attendu :
Bootstrap 3 - fixe la barre latérale problème de mise en page

Un peu de chance avec bootstrap 3? actuellement à la recherche à la mise en œuvre de quelque chose le long de ces lignes.

OriginalL'auteur Satinder singh | 2013-08-06

  1. 1

    Vous pouvez faire cela avec display:table-cell propriété

    J'ai créé un bootply démo => http://bootply.com/100790

    Suit:

    Ajouter une autre classe de votre enveloppe comme .mainwrap et en CSS

    .mainwrap {
 display:table;
}

    Ajouter CSS à la barre latérale de gauche et le contenu à droite

    .sidebar-left {
  display:table-cell;
  float:none;
}

.content-right {
 display:table-cell;
 float:none;
}

    J'ai supprimé min-hauteur à partir du contenu du droit, comme le tableau ne fonctionnera pas avec elle. Également changé flotteur à aucun. parce que vous n'en avez plus besoin.

    De Travail De Démonstration: http://bootply.com/100790

    Espère que cette aide

    OriginalL'auteur Surjith S M

  2. 0

    essayer cette

    http://jsfiddle.net/BM65D/

    body{
    margin:0;
    padding:0;
}
.header{
    background-color:#00A2E8;
    height:50px;
    position:fixed;
    top:0;
    width:100%;
}
.footer{
    background-color:gray;
    height:50px;
    position:fixed;
    bottom:0;
    width:100%;
}
.left{
    height:400px;
    background-color:#C3C3C3;
    width:200px;
    position:fixed;
    top:50px;  
}
.right{
    left:200px;
    width:100%;
    position:absolute;
}
    merci pour la réponse, mais ici vous avez fixé la hauteur de la barre de gauche, et également avec l'aide de bootstrap?. j'ai besoin de la colonne de droite,colonne de gauche

    OriginalL'auteur Falguni Panchal

  3. 0

    Essayez d'obtenir le droit de la hauteur du conteneur et de l'attribuer à gauche de la barre de navigation comme indiqué ci-dessous:

    $(document).ready(function(){
    var s = $(".container").outerHeight(true); 
  s+= "px";
  //alert("height" + s);
  $("#sidebar-left").css("height", s);
  $("#sidebar-left").css("background-color", "grey");


});
    merci pour l'essayer, mais c'est leur toute autre manière sans l'aide de Jquery au lieu de calculer hieght utilisé bootstrap construire-dans les classes
    Je pense que vous pouvez le faire via CSS uniquement lorsque les hauteurs de la gauche de contenu et à droite le contenu sont fixes et statiques.Sinon devriez aller avec Jquery..

    OriginalL'auteur web2008

  4. 0

    Essayez ceci:

    class="col-lg-2 col-sm-1"

    OriginalL'auteur Fyb3roptik

  5. 0

    Essayer de déformation de l'ensemble de la zone de contenu dans .conteneur .
    L'a vu dans le vieux docs sous Design fluide

    avez balise bootstrap 3, le lien que vous avez fourni est la version 2.3

    OriginalL'auteur ashwinm