/ / Zurb 4 atsevišķi izlasāmas daļas - zurb-pamatne

Zurb 4 atsevišķi izlasāmas daļas - zurb-pamatne

Man ir pilnekrāna izkārtojums, pamatojoties uz atbildi uz iepriekš uzdoto jautājumu:

CSS pilnekrāna režģa izkārtojums (ar dažām ritināšanas sadaļām)

Wireframe I, izmantojot:

šeit ievadiet attēla aprakstu

Rediģēt: šī ir ļoti līdzīga izkārtojuma uzvedība, kuru es vēlos atjaunot Zurb 4 (tomēr platumu un augstumu nav nepieciešams noteikt): http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html

Darbojas lieliski, tomēr tagad es mēģinu modelēt to pašu / līdzīgu izkārtojumu Zurb fondā 4, taču tam ir problēmas ar divām lietām:

  1. Tas ir neskaidrs, kā es varētu būt B un E ritiniet vertikāli un neatkarīgi (domāju, ka Mail.app izkārtojums Mac datorā)

  2. Tas ir neskaidrs, kā es varētu būt C un F, kas fiksēti ekrāna apakšā.

Atšķirībā no iepriekšējā jautājuma, es nedomāju, lai šīm sadaļām būtu fiksēts pikseļu platums.

Piezīme: Es ticu pirmajam mobilajam dizainam, taču es nedomāju, ka kāds no tā netiks uzskatīts par atsaucīgu. Es plānoju mainīt izmērus un parādīt / slēpt sadaļas atkarībā no ierīces un orientācijas. Bet Zurbas trūkst ritināšanas un pilna augstuma sekciju.

Atbildes:

5 atbildei Nr. 1

Galvenās lietas, kas bija jāveic, pamatojoties uz jūsu prasību:

Vispirms izmantojiet lapas visu platumu

Jūs vēlaties, lai izkārtojums aizpildītu visu lapu, un, lai to izdarītu, jums ir nepieciešams ignorēt Fonda klasi, piemēram:

.row {
max-width: 100%;
}

Otrkārt, ielieciet kājeni apakšā tāpēc jums var būt ritjosla B un E. Šeit ir lipīga CSS, kuru es mainīju, lai to izmantotu, izmantojot fonda veidni.

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

Galvenais ir četri konteineru divi: wrap, header, galvenais un kājene. Es pieņemu, ka jūsu galvenē būs fiksēts augstums, jo tas varētu būt banner vai izvēlne, lai jūs varētu pievienot klasi šādā kodā (skat. Trešo punktu).

Treškārt, ļaujiet vidējai DIVs stiept tāpēc tiem ir ritināšanas joslas garam saturam

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

Ņem vērā, ka, lai gan sadaļā B un E būs reaģējoši, jo tie sakritīs viens pret otru, augstums tiks fiksēts, un es domāju, ka jūs sagaidāt, ka tas notiks, kad jūs vēlaties ritjoslu par katru no tiem.

Kā jūs pieminējāt savā komentārā, ka mansIepriekšējais kods nedarbojas, un tas notiek tādēļ, ka, ja to aplūkojat mobilajā ierīcē, jums ir mazs apgabals, ar kuru strādāt. Jo mazāka ierīce saņem mazāk reālo statusu. Kas jums jādara, ir izlemt kādā brīdī jūs NAV vēlēsities ritināt galveno saturu (iedaļas B un E)

Tas nav laba ideja, ka jūs ļaujat lietotājiemritiniet dažas vietnes daļas. Pēc tam ļaujiet viņiem grūti ritināt pārējās sadaļas (lapas atlikusī daļa) tikai, lai tie ritinātu vēlreiz citā sadaļā. Un tas ir, pirms tie sasniedz lapas apakšdaļu. Tātad, kas jums ir nepieciešams, pamatojoties uz šo ieteikumu, ir:

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

Skatiet to darbībā šeit. Tajā būs redzams, ka mazākās ierīcēskājene pielīp pie pamatnes ar diviem konteineriem, kas sakrauti otrā virspusē. Darbvirsmas skatā kājene pieskaras tieši no apakšas, un, ja nepieciešams, jums būs galvenās satura rūtiņas.


Saistītie jautājumi


Komentāri (0)

Pievieno komentāru