/ / Zurb 4 separat rullbare sektioner - zurb-foundation

Zurb 4 separat scrollbare sektioner - zurb-foundation

Jeg har et fuldt skærmlayout baseret på et svar på et tidligere stillet spørgsmål:

CSS fuldskærmsgitterlayout (med nogle rullesektioner)

Wireframe I m bruger:

Indtast billedbeskrivelse her

Rediger: Dette er en meget lignende layoutadfærd. Jeg ønsker at genskabe i Zurb 4 (bredder og højder behøver ikke at blive rettet): http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html

Fungerer godt, men jeg forsøger nu at model det samme / lignende layout i Zurb Foundation 4, men har problemer med to ting:

  1. Det er uklart, hvordan jeg kan have B og E rulle lodret og uafhængigt (tænk Mail.app layout på en Mac)

  2. Det er uklart, hvordan jeg måske har C og F fastgjort til bunden af ​​skærmen.

I modsætning til mit tidligere spørgsmål planlægger jeg ikke at have faste pixelbredder for disse sektioner.

Bemærk: Jeg tror på mobil-første design, men jeg kan ikke se hvorfor noget af dette ikke ville blive betragtet som "responsivt". Jeg planlægger at ændre størrelse og vise / skjule sektioner afhængigt af enhed og orientering. Men rullende og fuldhøjde sektioner synes at mangle fra Zurb.

svar:

5 for svar № 1

Der vigtigste ting, der skulle gøres baseret på dit krav:

Brug først sidens hele bredde

Du vil have layoutet til at udfylde hele siden og for at gøre det, skal du tilsidesætte en Foundation klasse som denne:

.row {
max-width: 100%;
}

For det andet skal du holde fodfoden i bunden så du kan have en rullefelt til B og E. Her er en klæbrig CSS, som jeg har ændret for at få det til at fungere med en Foundation-skabelon.

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øglen er de fire container divs: wrap, header, hoved og footer. Jeg antager, at dit overskrift vil have en fast højde, da det kunne være et banner eller en menu, så du kan tilføje klassen på følgende kode (se tredje punkt).

For det tredje, lad de midterste DIV'er strække sig så de har rullefelter for langt indhold

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

Bemærk dog, mens der er sektioner B og E vil være lydhør i, at de vil stable sig over hinanden, højden vil blive rettet, og jeg tror, ​​du forventer, at det sker, som du vil have en rullebjælke på hver af dem.

Som du har nævnt i din kommentar, at mintidligere kode virker ikke, og det skyldes, at hvis du ser det på en mobil enhed, har du et lille område at arbejde med. Jo mindre enheden får den mindre virkelige tilstand, du har. Hvad du skal gøre er at bestemme på hvilket tidspunkt ønsker du IKKE at rulle dit hovedindhold (sektioner B og E).

Det er ikke en god idé, at du lader dine brugereRul visse dele af dit websted. Lad dem så svært ved at rulle til resten af ​​sektionerne (resten af ​​siden) for at få dem til at rulle igen i andet afsnit. Og det er før de når bunden af ​​siden. Så hvad du har brug for baseret på det forslag 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 aktion her. Du vil se der, at på mindre enheder, denfooter vil holde sig til bunden med de to beholdere stablet oven på den anden. På en desktop-visning holder bundsædet fast til bunden, og hvis det er nødvendigt, skal du have rullebjælker til hovedindholdet.


Beslægtede spørgsmål


Kommentarer (0)

Tilføj en kommentar