CSS flexbox: en-Tête, main, pied de page mise en page. Partie principale s'effondrer au milieu

J'ai une situation la plus simple avec

<!DOCTYPE html>
<html>
<head>
    <title>Whatever</title>
</head>

<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>

Donc, je veux que mon en-tête de à dire .. 15%, mon pied de page 5% et ma partie principale de prendre le reste de l'espace dans le milieu.
Je peux le faire avec position fixe et tout le reste mais je suis à essayer de comprendre le flex boîtes.
Donc, toutes mes tentatives ne fonctionnent pas.
Selon cet article: Flexbox mise en page j'en aurais aussi simple que cela:

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

header {
    height: 75px;
}

main {
    flex: auto;
}

footer {
    height: 25px;
}

... mais cela ne fonctionne tout simplement pas. J'ai essayé en changeant la taille de pixels de pourcentage, pas de chance. La partie du milieu juste s'effondre et il ne s'allonge pas.

J'ai aussi essayé quelques autres exemples dans la première page de résultats Google. Rien ne fonctionne.

Ce que je fais mal. Comment puis-je obtenir ci-dessus, avec un flex de boîtes?

Grâce.

P. S. Presque oublié. Mon navigateur est Chrome 34.0.1847.116 (260972)

InformationsquelleAutor r.sendecky | 2014-04-27
  1. 19

    Je ne sais pas comment vous dire où vous pouvez essayer cette méthode, mais c'est le travail (l'instant au moins).

    Voici un JSFiddle montrant la mise en page - J'ai ajouté une subtile couleur d'arrière-plan pour illustrer le tronçon.

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

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

header {
    height: 75px;
}

main {
    flex: auto;
    background-color: #ccc;
}

footer {
    height: 25px;
}
    InformationsquelleAutor Matias Vad
  2. -6

    À la fin, c'est à dire après votre pied de page de la balise, vous pouvez mettre ce code javascript 

    <script>
var header = document.getElementsByTagName("header")[0];
var main = document.getElementsByTagName("main")[0];
var footer = document.getElementsByTagName("footer")[0];

header.style.height=screen.height*0.15+"px";
main.style.height=screen.height*0.80+"px";
footer.style.height=screen.height*0.05+"px";    
</script>
    • Je vous remercie, mais le but est de le faire avec le flex boîtes - pas avec javascript, correction du positionnement ou de tout autre moyen. Ou au moins, j'aimerais une réponse définitive qu'il n'est pas possible de le faire avec flexbox mise en page.
    InformationsquelleAutor ashishmaurya