Floppybox CSS: intestazione, layout principale, piè di pagina. Parte principale collasso nel mezzo

Ho una situazione più semplice conFloppybox CSS: intestazione, layout principale, piè di pagina. Parte principale collasso nel mezzo

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

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

Quindi voglio che il mio colpo di testa di essere dire .. il 15%, il mio piè di pagina 5% e la mia parte principale prendendo il resto dello spazio in Medio. Posso farlo con la posizione fissa e tutto ciò ma sto cercando di capire le scatole flessibili. Quindi tutti i miei tentativi non funzionano. Secondo questo articolo: Flexbox layout mi dovrebbe avere come semplice come questo:

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; 
}

... ma questo semplicemente non funziona. Ho provato a cambiare le dimensioni da pixel a percentuale - senza fortuna. La parte centrale crolla e non si allunga.

Ho provato anche alcuni altri esempi nella prima pagina di hit di Google. Niente funziona.

Cosa sto sbagliando. Come posso ottenere quanto sopra con le scatole flessibili?

Grazie.

P.S. Quasi dimenticavo. Il mio browser è Chromium 34.0.1847.116 (260972)

fonte

2014-04-27 r.sendecky

Non so come si dove provare a questo metodo, ma funziona (almeno adesso).

Here's a JSFiddle showing the layout - Ho aggiunto un sottile colore di sfondo per illustrare il tratto.

<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; 
}

fonte

2014-06-05 16:40:51

-3

Alla fine, dopo cioè il tag piè di pagina si può mettere questo codice 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>

fonte

2014-04-27 15:04:09 user3091574

Grazie, ma l'obiettivo è farlo con le scatole flex - non con javascript, posizionamento fisso o altri mezzi. O almeno, mi piacerebbe una risposta definitiva che non è possibile farlo con il layout di flexbox. –

Floppybox CSS: intestazione, layout principale, piè di pagina. Parte principale collasso nel mezzo

risposta

Problemi correlati