/ / Zurb 4 sezioni scorrevoli separate - zurb-foundation

Zurb 4 sezioni scorrevoli separatamente - zurb-foundation

Ho un layout a schermo intero basato su una risposta a una domanda precedente:

Layout griglia a schermo intero CSS (con alcune sezioni a scorrimento)

Wireframe I "sto usando:

inserisci la descrizione dell'immagine qui

Modifica: questo è un comportamento di layout molto simile che sto cercando di ricreare in Zurb 4 (le larghezze e le altezze non devono essere corrette): http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html

Funziona alla grande, ma ora sto cercando di modellare lo stesso layout in Zurb Foundation 4 ma ho dei problemi con due cose:

  1. Non è chiaro come potrei avere B ed E scorrere verticalmente e indipendentemente (si pensi al layout di Mail.app su un Mac)

  2. Non è chiaro come avrei potuto fissare C e F nella parte inferiore dello schermo.

A differenza della mia domanda precedente, non prevedo di avere una larghezza di pixel fissa per queste sezioni.

Nota: Credo nel design mobile-first, ma non vedo perché tutto ciò non sia considerato "reattivo". Pianifico di ridimensionare e mostrare / nascondere le sezioni a seconda del dispositivo e dell'orientamento. Ma le sezioni a scorrimento ea tutta altezza sembrano mancare a Zurb.

risposte:

5 per risposta № 1

Ci sono le principali cose da fare in base alle tue esigenze:

Innanzitutto, utilizza l'intera larghezza della pagina

Vuoi che il layout riempia l'intera pagina e per farlo devi sostituire una classe Foundation come questa:

.row {
max-width: 100%;
}

In secondo luogo, attaccare il piè di pagina verso il basso quindi puoi avere una barra di scorrimento B e E. Ecco un CSS appiccicoso che ho modificato per farlo funzionare con un modello di Foundation.

html, body, #wrapper{ height: 100%; }
body > #wrapper{height: auto; min-height: 100%;}
#main { padding-bottom: 75px; /*  same height as the footer */
overflow:hidden;
top: 75px; bottom: 0; left: 0; right: 0;
padding-bottom: 75px;
position: absolute;
}
#footer {
position: relative;
margin-top: -75px; /* negative value of footer height */
height: 75px;
clear:both;
}

.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}

La chiave sono i quattro contenitori div: wrap, header, main e footer. Presumo che l'intestazione abbia un'altezza fissa in quanto potrebbe essere un banner o un menu in modo da poter aggiungere la classe sul seguente codice (vedi terzo punto).

Terzo, lascia che i DIV medi si allungino quindi hanno barre di scorrimento per contenuti lunghi

#header {
height:75px; // your desired height
}
// additional style for the "main" class
#main {
top: 75px; bottom: 0; left: 0; right: 0; // top is the same as header.height
}
// this will create a scroll bar on section B
#main .b {
overflow:auto;
height:100%;
}
// this will create a scroll bar on section E
#main .e {
overflow:auto;
height:100%;
}

Prendi nota anche se mentre sezioni B e E sarà reattivo in quanto si impileranno l'uno sull'altro, l'altezza sarà corretta, e penso che ti aspetti che ciò accada come vuoi una barra di scorrimento su ognuno di essi.

Come hai detto nel tuo commento che il mioil codice precedente non funziona e questo perché se lo visualizzi su un dispositivo mobile hai una piccola area con cui lavorare. Più piccolo il dispositivo ottiene lo stato meno reale che hai. Quello che devi fare è decidere a che punto NON vorresti scorrere il tuo contenuto principale (sezioni B e E).

Non è una buona idea lasciare che i tuoi utentiscorrere alcune parti del tuo sito. Quindi lascia che facciano fatica a scorrere verso il resto delle sezioni (resto della pagina) solo per farle scorrere di nuovo in un'altra sezione. E questo prima che raggiungano il fondo della pagina. Quindi quello che ti serve in base a questo suggerimento è:

@media only screen and (max-width: 768px) {
#main {
padding-bottom: 0;
position:inherit
}
#footer {
margin-top: 0;
}
#main .b {
overflow:auto;
height:auto;
}
#main .e {
overflow:auto;
height:auto;
}
}

Guardalo in azione qui. Vedrete lì che su dispositivi più piccoli, ilil piè di pagina si attaccherà al fondo con i due contenitori impilati sopra l'altro. Su una vista desktop, il piè di pagina si incolli fino in fondo e si avranno le barre di scorrimento per il contenuto principale, se necessario.


domande correlate


Commenti (0)

Aggiungi un commento