- Une Autre Mise À Jour -

depuis Twitter Bootstrap version 2.0 - qui a vu la suppression de la classe .container-fluid - il n'a pas été possible d'implémenter une disposition à deux colonnes fixe-fluide en utilisant seulement les classes bootstrap - cependant, j'ai mis à jour ma réponse pour inclure quelques petites modifications CSS qui peuvent être faites dans votre propre code CSS qui rendra cela possible

il est possible de mettre en œuvre une structure à fluide fixe en utilisant le CSS ci-dessous et légèrement code HTML modifié tiré du Bootstrap Twitter échafaudages : layouts page de documentation:

HTML

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="fixed">  <!-- we want this div to be fixed width -->
            ...
        </div>
        <div class="hero-unit filler">  <!-- we have removed spanX class -->
            ...
        </div>
    </div>
</div>

CSS

/* CSS for fixed-fluid layout */

.fixed {
    width: 150px;  /* the fixed width required */
    float: left;
}

.fixed + div {
     margin-left: 150px;  /* must match the fixed width in the .fixed class */
     overflow: hidden;
}


/* CSS to ensure sidebar and content are same height (optional) */

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
    position: relative;
}

.filler:after{
    background-color:inherit;
    bottom: 0;
    content: "";
    height: auto;
    min-height: 100%;
    left: 0;
    margin:inherit;
    right: 0;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: -1;  
}

j'ai gardé la réponse ci - dessous- même si l'édition pour soutenir 2.0 fait un fluide-fluide solution - comme il explique les concepts de base de la prise de la barre latérale et le contenu de la même hauteur (une partie importante de la askers question identifiés dans les commentaires)

---

Important

Réponse ci-dessous est fluide-fluide

mise à Jour comme l'a souligné @JasonCapriotti dans les commentaires, la réponse originale à cette question (créée pour v1.0) ne fonctionnait pas dans Bootstrap 2.0. Pour cette raison, j'ai mis à jour la réponse pour soutenir Bootstrap 2.0

pour s'assurer que le contenu principal remplit au moins 100% de la hauteur de l'écran, nous devons régler la hauteur des html et body à 100% et créer une nouvelle classe css appelée .fill qui a une hauteur minimale de 100%:

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}

nous pouvons alors ajouter le .fill classe à n'importe quel élément dont nous avons besoin pour prendre 100% de la hauteur de voile. Dans ce cas, nous l'ajoutons à la première div:

<div class="container-fluid fill">
    ...
</div>

pour s'assurer que la barre latérale et les colonnes de contenu ont la même hauteur est très difficile et inutile. Au lieu de cela, nous pouvons utiliser le pseudo-sélecteur ::after pour ajouter un élément filler qui donnera l'illusion que les deux colonnes ont la même hauteur:

.filler::after {
    background-color: inherit;
    bottom: 0;
    content: "";
    right: 0;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: -1;  
}

Pour s'assurer que le L'élément .filler est positionné par rapport à l'élément .fill il faut ajouter position: relative à .fill :

.fill { 
    min-height: 100%;
    position: relative;
}

et enfin ajouter le style .filler au HTML:

HTML

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="span3">
            ...
        </div>
        <div class="span9 hero-unit filler">
            ...
        </div>
    </div>
</div>

Notes

• si vous avez besoin de l'élément sur la gauche de la page pour être le remplissage, alors vous devez changer right: 0 à left: 0 .