web-dev-qa-db-fra.com

Bootstrap en-tête et pied de page fixes avec zone de contenu corps défilante dans le conteneur fluid

J'étais surpris de ne pouvoir trouver une réponse simple à ce problème en cherchant sur Google, mais la plupart des réponses aux panneaux de contenu défilant ne fonctionnaient pas correctement ou ne fonctionnaient pas avec bootstrap.

Réponses comme celui-ci ont des barres de défilement pleine page, ce qui semble faux.

J'essaie simplement d'avoir 100% de la hauteur html et body sans barre de défilement du navigateur, mais le défilement n'est visible que dans la zone de contenu du corps. Il doit se comporter avec bootstrap hauteurs de menu, etc.).

Jusqu'ici, le seul moyen qui semble fonctionner est d'utiliser absolument le contenu de la position et les éléments de bas de page.

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 semble tout simplement une mauvaise façon de procéder et semble avoir un impact négatif sur les dispositions Bootstrap). Par exemple, si la ligne de menu se réduit à deux lignes, la zone de contenu passe sous la barre de navigation div .

Quelqu'un peut-il me dire, s'il vous plaît, comment utiliser ce style, compatible avec une application prête à l'emploi MVC Razor/Bootstrap?

Remarques:

  • Il doit fonctionner avec IE8 et les versions ultérieures.
  • Cela doit fonctionner avec Bootstrap, donc si Boostrap est ajusté (taille de l'en-tête/du pied de page), il se corrigera aussi.

Mise à jour:

Voici un JSFiddle avec lequel travailler (y compris ma dernière solution de réponse ci-dessous):

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

htmlcssasp.net-mvctwitter-bootstrapless
18
Gone Coding

Ajoutez le css suivant pour désactiver le défilement par défaut:

body {
    overflow: hidden;
}

Et changez le #content css à cela pour que le parchemin soit uniquement sur le corps du contenu:

#content {
    max-height: calc(100% - 120px);
    overflow-y: scroll;
    padding: 0px 10%;
    margin-top: 60px;
}

Voir le violon ici.

Edit:

En fait, je ne sais pas quel était le problème auquel vous faisiez face, car il semble que vos CSS fonctionnent. J'ai seulement ajouté le code HTML et la déclaration CSS en-tête:

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;
}
header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background-color: #4C4;
    height: 50px;
}
footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #4C4;
    height: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<header></header>
<div class="container-fluid body-content">
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
</div>
<footer></footer>
23
falsarella

Une autre option consisterait à utiliser flexbox .

Bien que ce ne soit pas supporté par IE8 et IE9, vous pouvez envisager:

  • Ne vous occupez pas de ces anciennes IE versions
  • Fournir un repli
  • Utiliser un polyfill

Bien que certains préfixes de style spécifiques au navigateur soient nécessaires pour une prise en charge intégrale entre navigateurs, vous pouvez voir l’utilisation de base soit sur ce violon et sur l’extrait suivant:

html {
  height: 100%;
}
html body {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html body .container-fluid.body-content {
  width: 100%;
  overflow-y: auto;
}
header {
    background-color: #4C4;
    min-height: 50px;
    width: 100%;
}
footer {
    background-color: #4C4;
    min-height: 30px;
    width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<header></header>
<div class="container-fluid body-content">
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
</div>
<footer></footer>
7
falsarella

Jusqu'à ce que j'obtienne une meilleure option, c'est la réponse la plus "bootstrappy" que je puisse trouver:

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

Je suis passé à l’utilisation de LESS et à l’inclusion du paquet Bootstrap Source NuGet pour assurer la compatibilité) (en me donnant accès au fichier bootstrap variables.less:

dans la page principale _layout.cshtml

  • Déplacer le pied de page en dehors du conteneur body-content
  • Utilisez navbar-fixed-bottom Dans le pied de page de boostrap
  • Déposez le <hr/> Avant le pied de page (maintenant redondant)

Page pertinente 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 Site.less

  • Définissez les hauteurs HTML et BODY sur 100%
  • Définissez BODYoverflow sur hidden
  • Définissez body-content Div position sur absolute
  • Définissez body-content Div top sur @navbar-height Au lieu de la valeur de câblage
  • Définissez body-content Div bottom sur 30px.
  • Réglez body-content Div left et right sur 0
  • Définissez body-content Div overflow-y Sur auto

Site.less 

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 restant est qu'il ne semble pas y avoir de variable de définition pour le footer height Dans le bootstrap. Si quelqu'un appelle, dites-moi s'il existe une variable magique 30px définie dans Bootstrap Je l'apprécierais!

2
Gone Coding