/ / Zurb 4 separat rullbare deler - zurb-foundation

Zurb 4 separat rullbare deler - zurb-foundation

Jeg har et fullskjermoppsett basert på et svar på et tidligere spørsmål:

CSS fullskjerm grid layout (med noen rulleseksjoner)

Wireframe Jeg bruker:

skriv inn bildebeskrivelse her

Rediger: Dette er en veldig lik layoutoppførsel Jeg ønsker å gjenskape i Zurb 4 (bredder og høyder trenger ikke å bli løst skjønt): http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html

Fungerer bra, men jeg forsøker nå å modellere samme / lignende layout i Zurb Foundation 4, men har problemer med to ting:

  1. Det er uklart hvordan jeg kan ha B og E bla vertikalt og uavhengig (tenk Mail.app-layout på en Mac)

  2. Det er uklart hvordan jeg kan ha C og F fast på bunnen av skjermen.

I motsetning til mitt tidligere spørsmål, har jeg ikke tenkt å ha faste pikselbredder for disse delene.

Merk: Jeg tror på mobil-første design, men jeg ser ikke hvorfor noe av dette ikke ville bli betraktet som "responsivt". Jeg planlegger å endre størrelse og vise / skjule seksjoner avhengig av enhet og orientering. Men rullende og fullhøyde seksjoner ser ut til å mangle fra Zurb.

svar:

5 for svar № 1

Det viktigste som måtte gjøres basert på kravet ditt:

Bruk først sidens hele bredde

Du vil at layoutet skal fylle hele siden og for å gjøre det du trenger å tilsidesette en Foundation-klasse som denne:

.row {
max-width: 100%;
}

For det andre, hold fotfoten til bunnen slik at du kan ha en rullefelt for B og E. Her er en klebrig CSS som jeg endret for å få den til å fungere med en grunnmal.

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

Nøkkelen er de fire container divs: pakke, header, hoved og bunntekst. Jeg antar at toppteksten din vil ha en fast høyde som det kan være et banner eller en meny, slik at du kan legge til klassen på følgende kode (se tredje punkt).

Tredje, la de midterste DIV'ene strekke seg så de har rullestenger for langt innhold

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

Vær oppmerksom på det mens seksjoner B og E vil være lydhør fordi de vil stable over hverandre, høyden vil bli løst, og jeg tror du forventer at det skal skje som du vil ha en rullefelt på hver av dem.

Som du har nevnt i din kommentar at minforrige kode fungerer ikke, og det er fordi hvis du ser det på en mobil enhet, har du et lite område å jobbe med. Jo mindre enheten får den mindre virkelige tilstanden du har. Det du trenger å gjøre er å bestemme på hvilket tidspunkt vil du IKKE vil rulle ditt hovedinnhold (avsnitt B og E).

Det er ikke en god ide at du lar brukerne dinebla visse deler av nettstedet ditt. La dem da få det vanskelig å bla til resten av seksjonene (resten av siden) for å få dem til å rulle igjen i andre seksjoner. Og det er før de når bunnen av siden. Så det du trenger å bygge på det forslaget er:

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

Se det i aksjon her. Du vil se der på mindre enheter, denfooter vil holde seg til bunnen med de to beholderne stablet ovenpå den andre. På skrivebordsbeskrivelse holder bunnteksten rett til bunnen, og du vil ha rullestenger for hovedinnholdet, om nødvendig.


Beslektede spørsmål


Kommentarer (0)

Legg til en kommentar