Bootstrap de Remplissage de récipient de liquide entre en-tête et pied de page

Cela peut être une question très simple, mais j'ai été hors de la CSS de la scène pendant un certain temps et je n'arrive pas à le comprendre. Je suis en utilisant le Bootstrap cadre et j'ai un fixe en-tête et pied de page. Le contenant, entre inclut une barre de navigation et la zone de contenu. Je voudrais que le récipient à remplir tout l'espace (100% de la hauteur) entre l'en-tête et pied de page.

Ici est jsFiddle du projet: http://jsfiddle.net/NyXkt/2/

C'est l'actuelle structure html:

<div id="wrapper">
<!-- Header -->
<div class="container-fluid no-padding header">
<div class="row-fluid fill-height">
<!-- Header Left -->
<div class="span2">
<p class="center-text">Left</p>
</div>
<!-- Header Middle -->
<div class="span8">
<p class="center-text">Middle</p>
</div>
<!-- Header Right -->
<div class="span2">
<p class="center-text">Right</p>
</div>
</div>
</div>
<!-- Content Wrapper -->
<div class="container-fluid no-padding fill">
<div class="row-fluid">
<div class="span2">
<div class="well sidebar-nav-fixed no-padding">
<ul id="nav">
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Sub-Item 1 a</a>
</li>
<li><a href="#">Sub-Item 1 b</a>
</li>
<li><a href="#">Sub-Item 1 c</a>
</li>
</ul>
</li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Sub-Item 2 a</a>
</li>
<li><a href="#">Sub-Item 2 b</a>
</li>
</ul>
</li>
<li><a href="#">Item 3</a>
<ul>
<li><a href="#">Sub-Item 3 a</a>
</li>
<li><a href="#">Sub-Item 3 b</a>
</li>
<li><a href="#">Sub-Item 3 c</a>
</li>
<li><a href="#">Sub-Item 3 d</a>
</li>
</ul>
</li>
<li><a href="#">Item 4</a>
<ul>
<li><a href="#">Sub-Item 4 a</a>
</li>
<li><a href="#">Sub-Item 4 b</a>
</li>
<li><a href="#">Sub-Item 4 c</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="span10">
<p class="center-text">Content</p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer">
<div class="container-fluid">
<p class="center-text">Footer</p>
</div>
</div>

Si quelqu'un peut expliquer ce que je peut-être besoin de le faire, ou m'indiquer un exemple, je l'apprécierais.

Salut, [bootstrap] tag c'est pas pour le framework CSS, vous devez utiliser [twitter-bootstrap] à la place.

OriginalL'auteur fortune | 2013-03-26

  1. 7

    Bootstrap 4 (mise à jour 2018)

    Maintenant, il est plus facile d'obtenir cette mise en page à l'aide de flexbox.

    <body class="d-flex flex-column">
<header>
</header>
<main class="container-fluid flex-fill">
</main>
<footer>
</footer>
</body>
body {
min-height:100vh;
}
.flex-fill {
flex:1 1 auto;
}

    Démo

    Remarque: La flex-fill classe utilitaire sera inclus dans la prochaine Bootstrap 4.1 libération. Ainsi, après que la libération de l'extra CSS pour flex-fill ne sera pas nécessaire.

    Bootstrap 2 (original 2013 réponse)

    Tout parent conteneurs également être à 100% de la hauteur (html,le corps et l' #wrapper). Si vous faites #wrapper {height:100%} et ajouter " remplir hauteur de votre conteneur, il devrait fonctionner. Voir ici:

    http://jsfiddle.net/skelly/NyXkt/4/

    #wrapper {
min-height: 100% !important;
height: 100% !important;
margin: 0 auto -33px;
}
    Cet exemple semble avoir toujours une barre de défilement, même si le contenu n'est pas très grande, est que, parce que le pied de page?
    Avez-vous été en mesure de résoudre le problème avec la barre de défilement affiche toujours?
    body {overflow:hidden} corriger ça, mais je ne suis pas sûr si c'est ce que vous allez pour.
    Le Bootstrap 4 réponse est correcte!

    OriginalL'auteur Zim