Layout Holy Grail di Flexbox: intestazione fissa, Nav. Di sinistra fissa, area del contenuto del fluido, barra laterale destra fissa

Sto tentando di creare il layout "Holy Grail" utilizzando Flexbox.Layout Holy Grail di Flexbox: intestazione fissa, Nav. Di sinistra fissa, area del contenuto del fluido, barra laterale destra fissa

Header fisso
fissa, pieghevole, scorrevole sinistra Nav
flessibile zona contenuto
fissa, pieghevole, scorrevole destro Nav

Vedi sotto:

Ho tutto funzionante, tranne per l'altezza dell'area "app" sotto l'intestazione. Al momento è 100vh (100% dell'altezza del viewport), ma questo include l'intestazione 64px.

Ho tentato calc (100vh - 64px), ma questo non funziona bene con flex.

Ecco la mia struttura HTML di base:

<main> 
    <header></header> 
    <app> 
     <nav>Left Nav</nav> 
     <article>Content</article> 
     <aside>Right Nav</aside> 
    </app> 
</main>

E il CSS di supporto:

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

header { 
    z-index: 0; 
    flex: 0 0 64px; 
    display: flex; 
} 

app { 
    flex: 1 1 100vh; 
    display: flex; 
} 

nav { 
    flex: 0 0 256px; 
    order: 0; 
} 

article { 
    flex: 1 1 100px; 
    order: 1; 
} 

aside { 
    flex: 0 0 256px; 
    order: 2; 
}

- - - Full jsFiddle Here - - -

- - - Simplified jsFiddle Here - - -

fonte

2015-11-04 Jon

FYI, il tag 'flex' viene utilizzato per Apache Flex. Il tag 'flexbox' si riferisce ai layout flex CSS. – Brian

@ Brian Grazie per l'attenzione! – Jon

Capito!

Risulta ci sono stati alcuni conflitti CSS con <main> e <body>, e tutto quello che dovevo fare era rimuovere il <main> involucro, poi aggiungere le definizioni Flex direttamente al corpo della pagina.

- - - Here's the full working jdFiddle - - -

- - - Here's the simplified jdFiddle - - -

Nuovo HTML Struttura:

<body> 
    <header></header> 
    <app> 
    <nav>Left Nav</nav> 
    <article></article> 
    <aside>Right Nav</aside> 
    </app> 
</body>

Nuovo CSS non protagonista:

0.123.516,41 mila

html, body { 
    margin: 0; 
    height: 100%; 
    min-height: 100%; 
} 

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

header { 
    z-index: 0; 
    flex: 0 64px; 
    display: flex; 
} 

app { 
    flex: 1; 
    display: flex; 
} 

nav { 
    flex: 0 0 256px; 
    order: 0; 
} 

article { 
    flex: 1; 
    order: 1; 
    overflow: auto; 
} 

aside { 
    flex: 0 0 256px; 
    order: 2; 
}

Sentiti libero di usarlo come base per le tue applicazioni! Godere!

fonte

2015-11-04 05:27:20 Jon

Questa risposta, benché funzioni correttamente con Chrome (47) e Safari (9), non sembra funzionare correttamente in Firefox (44). Questo sembra essere un problema ricorrente che vedo con layout come questo codificato in flexbox su FF - non sembra rispettare l'abilità di un singolo pannello (i pannelli nav e/o articolo nell'esempio) di avere un flex altezza calcolata e impostazione di overflow-y. Invece, l'intera pagina scorre. Non riesco a farlo funzionare correttamente in FF - forse mancano alcuni prefissi? –

Grazie per aver condiviso. Sta usando il tag HTML '' semanticamente corretto? O si dovrebbe usare invece 'div id =" app ">'? O stai usando un framework come AngularJs? –

@ J.KyMarsh Basta aggiungere il selettore 'overflow: auto;' a 'app' e l'intestazione fissa funzionerà anche in FF. – smajl

Layout Holy Grail di Flexbox: intestazione fissa, Nav. Di sinistra fissa, area del contenuto del fluido, barra laterale destra fissa

risposta

Problemi correlati