Bootstrap 100% de la hauteur de la barre latérale de DROITE

Je suis en utilisant Bootstrap 3 avec 2 colonnes. La colonne de droite est ma barre latérale. J'ai d'horizons différents pour chacun et je peux dire que ma barre latérale de la colonne de ne pas continuer tout le chemin vers le bas de l'essentiel du contenu de son enveloppe. Dans la plupart des cas, le contenu principal, qui est sur la droite, est plus longue que la barre latérale de contenu, mais je ne veux pas voir le fond de la zone de contenu principal, mais la barre latérale arrière-plan du contenu continue.

Voici le jsfiddle que j'ai modélisé après, pour atteindre 100% de la hauteur de la barre latérale, mais je n'arrive pas à le faire fonctionner.

http://jsfiddle.net/34Fc5/1/

Voici l'essentiel de mon code:

<div id="content" class="clearfix row">         
    <div id="main" class="col-sm-8 clearfix" role="main">                                   
        <article id="post-1728" class="post-1728 page type-page status-publish hentry clearfix" role="article" itemscope="" itemtype="http://schema.org/BlogPosting">                   
            <header>                            
                <div class="page-header"><h1 class="entry-title" itemprop="headline">About</h1></div>                       
            </header> <!-- end article header -->

            <section class="post_content clearfix" itemprop="articleBody">
                <p class="lead">LENGTHY CONTENT</p>                 
            </section> <!-- end article section -->

            <footer>

            </footer> <!-- end article footer -->

        </article> <!-- end article -->

    </div> <!-- end #main -->
    <div id="sidebar1" class="col-sm-4" role="complementary">
            <div class="sidebar-content"></div>
    </div>        
    <div style="clear:both">
</div>

Voici mon jsfiddle:

http://jsfiddle.net/8yvgh7xj/

Ce serait génial si quelqu'un a eu ce problème avant. Je vois beaucoup de barre latérale de GAUCHE à 100%, mais pas le droit encadrés avec Bootstrap.

Grâce.

OriginalL'auteur Rick Scolaro | 2014-09-24

  1. 6

    Je ressens votre douleur. J'ai rencontré ce problème et il ne semble pas être beaucoup d'élégance des correctifs pour ce problème. Quelques approches qui peuvent être prises sont les suivantes:

    1. Utilisation de rembourrage et négatif de la marge pour augmenter la hauteur (voir l'article ci-dessous)

    2. Utiliser Javascript pour augmenter la hauteur de la div au moment de l'exécution

      • vous pouvez voir un scintillement, tandis que les hauteurs des divs sont calculés et ajustés.

    3. L'utilisation de tables

      • ne cadrent pas bien avec le bootstrap paradigme de la présentation de la page peut avoir des problèmes avec la conception responsive

    La question suivante CSS - Développez flotteur enfant DIV hauteur à la taille de ses parents aborde le problème en détail.

    votre css devient:

    #content {
   overflow: hidden;
}

#sidebar1{
   background-color:#eee;
   background-repeat: repeat;
   margin-bottom: -99999px;
   padding-bottom: 99999px;
}

#sidebar1 .sidebar-content{ 
    width:100%;
    padding: 5px;
    margin:0;
    position:relative;
}
    Cette méthode fonctionne, bien que je n'ai pas besoin de la barre latérale de la div du contenu ou css.

    OriginalL'auteur Alan Wolman

  2. 6

    Barre latérale sur la gauche

    Sur option serait de retirer la barre latérale du flux normal par absolute de positionnement, et à l'expansion de sa hauteur (la zone marge) par top: 0, bottom: 0 déclarations à l'égard de l'emballage, .wrap.

    .sidebar {
    position: absolute;
    top: 0; bottom: 0; left: 0;
}

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

    Ensuite, nous devons faire pression sur la colonne de droite contenant le <article> à droite par col-xs-offset-4 décalage de classe basée sur la taille de la barre latérale, comme suit:

    EXEMPLE ICI

    <div class="col-xs-8 col-xs-offset-4"> ... </div>

    Barre latérale sur la droite

    Compte tenu de la même approche, la seule chose doit être changé, c'est de modifier left: 0 à right: 0.
    Aussi il n'y a pas besoin d'avoir de décalage de classe sur l'autre colonne; par conséquent, vous pouvez supprimer col-xs-offset-4.

    MISE À JOUR EXEMPLE

    <div class="col-xs-8"> ... </div>
    J'ai regardé votre jsfiddle et il semble que la barre latérale sur la gauche. Je voulais le contraire, où le gris de la barre latérale avec une petite quantité de contenu continue vers le bas.
    Je viens de modifier le premier violon démo que vous avez donné dans la question: jsfiddle.net/34Fc5/1 dans lequel la barre latérale sur la gauche. De toute façon, je vais mettre à jour la réponse en quelques minutes.
    Son deuxième violon après mon code que vous devriez essayer de la modifier. Merci.
    Juste mis à jour la réponse.
    Qui a travaillé, presque. Si le contenu est plus courte que la barre latérale, la barre latérale qui passe.

    OriginalL'auteur Hashem Qolami