/ / Zurb 4 separat rullbara sektioner - zurb-foundation

Zurb 4 separat rullbara sektioner - zurb-foundation

Jag har ett fullständigt skärmlayout baserat på ett svar på en tidigare frågad fråga:

CSS fullskärmsnätlayout (med några rullningsavsnitt)

Wireframe I "m använder:

skriv in bildbeskrivningen här

Redigera: Det här är ett mycket liknande layoutbeteende. Jag vill återskapa i Zurb 4 (bredder och höjder behöver inte fixas men): http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html

Fungerar bra, men jag försöker nu att modellera samma / liknande layout i Zurb Foundation 4 men har problem med två saker:

  1. Det är oklart hur jag kan ha B och E bläddra vertikalt och självständigt (tänk Mail.app-layout på en Mac)

  2. Det är oklart hur jag kan ha C och F fixad till botten av skärmen.

Till skillnad från min tidigare fråga planerar jag inte att ha fasta pixelbredder för dessa sektioner.

Notera: Jag tror på mobil-först design, men jag ser inte varför något av detta inte skulle betraktas som "responsivt". Jag planerar att ändra storlek och visa / dölja sektioner beroende på enhet och orientering. Men rullning och fullhöjdssektioner verkar sakna från Zurb.

svar:

5 för svaret № 1

Det viktigaste sakerna som behövdes utifrån ditt krav:

Använd först sidans hela bredd

Du vill att layouten ska fylla hela sidan och för att göra det måste du åsidosätta en Foundation-klass så här:

.row {
max-width: 100%;
}

För det andra, sticka sidfoten till botten så du kan ha en rullningsfält för B och E. Här är en klibbig CSS som jag modifierade för att få den att fungera med en grundmall.

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

Nyckeln är de fyra containerdivisionerna: wrap, header, main och footer. Jag antar att din rubrik har en fast höjd eftersom det kan vara en banderoll eller meny så att du kan lägga till klassen enligt följande kod (se tredje punkten).

Tredje, låt de mellersta DIV-sträckorna sträcka sig så de har rullfält för långt innehåll

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

Observera dock att medan avsnitt B och E kommer att vara lyhörd eftersom de kommer att stapla över varandra, höjden kommer att åtgärdas, och jag tror att du förväntar dig att det ska hända som du vill ha en rullningsfält på var och en av dem.

Som du har nämnt i din kommentar att mintidigare kod fungerar inte och det beror på att om du tittar på det på en mobil enhet har du ett litet område att arbeta med. Ju mindre enheten blir, desto mindre verklig status har du. Vad du behöver göra är att bestämma vid vilken tidpunkt skulle du inte vilja rulla ditt huvudinnehåll (sektioner B och E).

Det är inte en bra idé att du låter dina användarebläddra i vissa delar av din webbplats. Låt dem då svårt rulla till resten av sektionerna (resten av sidan) för att få dem att bläddra igen i andra avsnitt. Och det är innan de når längst ner på sidan. Så vad du behöver baserat på det förslaget är:

@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 den i aktion här. Du kommer att se det där på mindre enheter,footer kommer att hålla sig till botten med de två behållarna staplade ovanpå den andra. På en skrivbordsbild håller fotfoten rätt till botten och du kommer att ha rullfält för huvudinnehållet, om det behövs.


Relaterade frågor


Kommentarer (0)

Lägg till en kommentar