Bootstrap a fixé l'en-tête et le pied de page avec la zone de contenu du corps qui défile dans le conteneur de fluide

J'ai été surpris, je ne pouvais pas trouver une réponse simple à ce problème par Googler, mais la plupart des réponses à défilement des panneaux de contenu, soit ne fonctionnent pas correctement ou ne fonctionne pas avec bootstrap.

Réponses comme celui-ci ont une page entière barres de défilement, ce qui semble erroné.

J'essaye simplement d'avoir 100% de la hauteur html et body avec aucun navigateur barre de défilement, mais le défilement visible sur le corps de la zone de contenu. Il doit se comporter avec bootstrap menu hauteurs etc.

Jusqu'à présent, le seul moyen semble fonctionner, à tous, c'est à l'aide absolument position de contenu et les pieds de page les éléments.

html {
  height: 100%;
}
html body {
  height: 100%;
  overflow: hidden;
}
html body .container-fluid.body-content {
  position: absolute;
  top: 50px;
  bottom: 30px;
  right: 0;
  left: 0;
  overflow-y: auto;
}

footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
}

Mais cela ne semble pas la voie à suivre à ce sujet et semble impact Bootstrap mises en page de façon négative. Par exemple, si la ligne de menu s'affiche sur deux lignes, la zone de contenu passe sous le nav-bar div.

Peut tout merci de m'indiquer le bon chemin à faire à propos de ce style, qui est compatible avec un out-of-the-box MVC, Razor/Bootstrap application?

Notes:

  • Il a besoin de travailler avec IE8 partir.
  • Il a besoin de travailler avec Bootstrap, donc si Bootstrap est ajusté (en-tête/pied de page tailles) puis il corrige lui-même trop.

Mise à jour:

Ici est un JSFiddle à travailler (y compris ma dernière solution de réponse ci-dessous):

JSFiddle: http://jsfiddle.net/TrueBlueAussie/6cbrjrt5/

source d'informationauteur Gone Coding

  1. 2

    Jusqu'à ce que je reçois une meilleure option, c'est le plus "bootstrappy" répondre à mon travail:

    JSFiddle: http://jsfiddle.net/TrueBlueAussie/6cbrjrt5/

    J'ai activé le MOINS et dont le Bootstrap Source de package NuGet pour assurer la compatibilité (en me donnant accès à l'amorçage variables.less fichier:

    dans _layout.cshtml page maître

    • Déplacer le pied de page en dehors de la body-content conteneur
    • Utilisation de bootstrap est navbar-fixed-bottom sur le pied de page
    • Baisse de la <hr/> avant le pied de page (comme redondante)

    Page HTML:

    <div class="container-fluid body-content">
    @RenderBody()
</div>
<footer class="navbar-fixed-bottom">
    <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
</footer>

    Dans Le Site.moins

    • Ensemble HTML et BODY hauteurs à 100%
    • Ensemble BODY overflow à hidden
    • Ensemble body-content div position à absolute
    • Ensemble body-content div top à @navbar-height au lieu de câblage valeur
    • Ensemble body-content div bottom à 30px.
    • Ensemble body-content div left et right à 0
    • Ensemble body-content div overflow-y à auto

    Site.moins

    html {
    height: 100%;

    body {
        height: 100%;
        overflow: hidden;

        .container-fluid.body-content {
            position: absolute;
            top: @navbar-height;
            bottom: 30px;
            right: 0;
            left: 0;
            overflow-y: auto;
        }
    }
}

    Le problème reste il ne semble pas que la définition de la variable pour la footer height dans le bootstrap. Si quelqu'un appel me dire si il y a une magie 30px variable définie dans le Bootstrap, j'apprécierais.