Comment faire un div sensible hauteur entre en-tête et pied de page avec CSS?

C'est une configuration simple avec ce que je pense que vous voulez accomplir. IE10 prise en charge est possible que vous avez à préfixe /utiliser l'ancienne syntaxe pour le flex de la propriété.

Nous avons un élément wrapper pour laquelle nous disons: vous êtes maintenant un flex élément et votre enfant les éléments peuvent être flex(ible) éléments avec display: flex;

Pour la direction que nous utilisons colonne, la valeur par défaut est "rangée", mais nous voulons d'eux, sous les uns des autres.

Enfin, nous définissons les hauteurs de l'en-tête et pied de page et donc de l'élément principal: vous avez le flex de la propriété '1'. Qui va remplir l'espace qui reste entre les éléments.

CSS:

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}
.wrapper {
  display: flex;
  height: 100%;
  flex-direction: column;
  -ms-flex-direction: column;
  background: red;
}

header {
  height: 100px;
  background: blue;
}

main {
  flex: 1;
  background: orange;
}

footer {
  height: 20px;
  background: yellow;
}

HTML:

<div class="wrapper">
  <header>
    Header element
  </header>

  <main>
    <h1> Main</h1>
  </main>

  <footer>
    Footer  
  </footer>
</div>

vous pouvez le faire avec du css calc:

html,body{ height:100%; }
.content{
    height: calc(100% - 120px);
}

Bien sûr, vous avez à changer de 120px pour ce qui est de la somme du pied de page et l'en-tête de la hauteur. Et n'oubliez pas le vendeur de préfixes.

Plus d'infos: https://developer.mozilla.org/es/docs/Web/CSS/calc

Un conseil: n'oubliez pas d'utiliser les unités à l'intérieur de la () et n'oubliez pas d'utiliser les espaces autour de l' - + * signes ou il ne fonctionnera pas.

Fixer les deux d'en-tête et pied de page à l'aide de position:fixed; et pour l'utilisation du contenu

padding: 60px 0;
height: 100%;
box-sizing: border-box;

http://codepen.io/anon/pen/xGRyNW

Approche 1: La flexbox solution, qui fonctionne pour les deux connu/inconnu de la hauteur de l'en-tête et pied de page. Prise en charge du navigateur: IE10+

JsFiddle Démo

CSS:

html {
    height: 100%;
}
body {
    margin: 0;
    min-height: 100%;
    display: -ms-flexbox; /* IE 10 */
    display: -webkit-flex; /* Safari */
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
main {
    -ms-flex: 1;  /* IE 10 */
    -webkit-flex: 1; /* Safari */
    flex: 1;
    background: lightgoldenrodyellow;
}
header, footer {
    background: lightseagreen;
}

HTML:

<header>header</header>
<main>main</main>
<footer>footer</footer>

Approche 2: Le CSS table solution, qui fonctionne pour les deux connu/inconnu de la hauteur de l'en-tête et pied de page. Prise en charge du navigateur: IE8+

JsFiddle Démo

CSS:

html, body {
    height: 100%;
}
body {
    display: table;
    width: 100%;
    margin: 0;
}
.header, .main, .footer {
    display: table-row;
}
.header, .footer {
    background: lightseagreen;
}
.main {
    height: 100%;
    background: lightgoldenrodyellow;
}

HTML:

<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>

Approche 3: La position solution ne fonctionne que pour connaître la hauteur de l'en-tête et pied de page. Prise en charge des navigateurs: IE7+

JsFiddle Démo

CSS:

html {
    position: relative;
    min-height: 100%;
}
body {
    background: lightgoldenrodyellow;
    margin: 20px 0;
}
.header, .footer {
    background: lightseagreen;
    position: absolute;
    left: 0;
    width: 100%;
    height: 20px;
}
.header {
    top: 0;
}
.footer {
    bottom: 0;
}

HTML:

<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>

Voici une petite astuce pour créer des éléments sensibles qui conservent leur aspect ratio à plus grande échelle.

Cependant, lorsque nous spécifier un padding-bottom de la valeur pour le même élément, le rembourrage de mesure est calculée par rapport à la largeur de l'élément:

.rect {
    width: 100%;
    height: 0;
    padding-bottom: 50%;
}

Rapport d'aspect Correct

Vous remarquerez que j'ai mis de l'élément de propriété de hauteur de 0, pour s'assurer que la hauteur des éléments enfants ne seront pas ajoutés à la valeur de remplissage lorsque la hauteur visible est calculé.

D'une note sur les éléments enfants

Si vous aussi vous souhaitez spécifier le pourcentage en fonction des hauteurs pour un enfant de l'élément, vous devrez attribuer une valeur absolue ou relative de la position de la valeur à la fois le parent et l'enfant:

.rect {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 50%;
 }
.rect p {
    position: absolute;
    margin: 0;
    height: 100%;
    }

Voir Une Démo