Bootstrap 3 et list-item-groupe overflow-y, faites défiler avec des étirements restant de la hauteur

J'ai le code HTML suivant basé sur Bootstrap 3:

<div class="row">
    <div class="col-md-3">
        <div class="well" id="well1">
            Some content
        </div>

        <div class="well" id="well2">
            <div class="list-group">
                <a href="#" class="list-group-item">
                    <h4 class="list-group-item-heading">Heading 1</h4>

                    <p class="list-group-item-text">Some text...</p>
                </a>

                <a href="#" class="list-group-item">
                    <h4 class="list-group-item-heading">Heading 2</h4>

                    <p class="list-group-item-text">Some text...</p>
                </a>

                <a href="#" class="list-group-item">
                    <h4 class="list-group-item-heading">Heading 3</h4>

                    <p class="list-group-item-text">Some text...</p>
                </a>

                <a href="#" class="list-group-item">
                    <h4 class="list-group-item-heading">Heading 4</h4>

                    <p class="list-group-item-text">Some text...</p>
                </a>
            </div>
        </div>
    </div>
</div>

Le nombre de list-group-item-instances peuvent varier.

Ce que je veux réaliser est le suivant:

Je veux well2 être étiré au maximum en restant en hauteur et afficher une barre de défilement verticale à l'intérieur de well2 si il n'y a plus list-group-item-instances que fit dans la fenêtre du navigateur, sans le défilement du navigateur complet de la fenêtre.

Il va être difficile de t'aider sans plus de la page de la structure. Voici un violon pour commencer: jsfiddle.net/isherwood/n415es53
Pas sûr que je comprends le contexte, et donc est-ce que vous souhaitez? jsfiddle.net/jme11/n415es53/2
Oui, c'est ça.
merci de poster votre violon comme réponse afin que je puisse marquer. Merci.

OriginalL'auteur Alexander Zeitler | 2014-10-05

  1. 2

    Pour obtenir votre deux éléments constituent la totalité de la hauteur du navigateur, vous aurez besoin d'avoir tous les éléments ancêtres d'avoir une certaine hauteur. Définir le html et le corps à 100% de la hauteur, puis de créer une classe pour ajouter à vos autres éléments ancêtres. J'ai appelé cette classe pleine hauteur.

    Maintenant que tous les ancêtres d'une hauteur, vous pouvez simplement définir la hauteur de chacun de vos deux puits. Parce que le bien de Twitter Bootstrap a 20px de la marge, vous pouvez utiliser le calc() l'expression sur le premier puits de soustraire la marge à partir du pourcentage. Tous les navigateurs modernes soutien calc(). Comme un back up pour IE8 et les anciennes versions du navigateur Android, vous pouvez utiliser de la hauteur avec seulement un pour cent de la valeur d'abord comme une solution de repli.

    Pour la deuxième, c'est la hauteur du reste pour cent de 100% et définissez la propriété overflow sur auto. J'ai également supprimé la marge du bas de la deuxième pour qu'il ajuste bien à la partie inférieure de la fenêtre d'affichage, mais vous pouvez bien évidemment utiliser calc ici aussi.

    HTML:

    <div class="container full-height">
<div class="row full-height">
<div class="col-md-3 full-height">  
<div class="well" id="well1">Some content</div>          
<div class="well" id="well2">
<div class="list-group"> 
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 1</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 2</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 3</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 4</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 5</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 6</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 7</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 8</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 9</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 10</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 11</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 12</h4>
<p class="list-group-item-text">Some text...</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Heading 13</h4>
<p class="list-group-item-text">Some text...</p>
</a>
</div>
</div>
</div>
</div>
</div>

    CSS:

    html, body, .full-height {
height: 100%;
}
#well1 {
height: 15%; /*fall back for IE8, Safari 5.1, Opera Mini and pre-4.4 Android browsers*/
height: calc(15% - 20px);
overflow: hidden; /*better to decide how you want to handle this than to let the browser decide*/
}
#well2 {
height: 85%;
margin-bottom: 0;
overflow: auto;
}

    OriginalL'auteur jme11