/ / Zurb 4 erikseen vieritettävää osaa - zurb-base

Zurb 4 erikseen vieritettävää osaa - zurb-foundation

Minulla on koko näytön kokoonpano, joka perustuu vastaukseen aiemmin kysyttyyn kysymykseen:

CSS-koko ruudun koko (joidenkin vieritysten kohdalla)

Wireframe I "m käyttäen:

kirjoita kuvan kuvaus tähän

Muokkaa: Tämä on hyvin samankokoinen asettelukäyttäytyminen, jota haluan luoda uudelleen Zurb 4: ssä (leveydet ja korkeudet eivät kuitenkaan tarvitse olla kiinteitä): http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html

Toimii hyvänä, mutta nyt yritän mallintaa samaa / samankaltaista asettelua Zurb Foundation 4: ssä, mutta ongelmana on kaksi asiaa:

  1. On epäselvää, miten voisin olla B ja E vieritä pystysuoraan ja itsenäisesti (ajatella Mail.app -asennusta Macilla)

  2. On epäselvää, miten minulla olisi C ja F kiinnitetty näytön alaosaan.

Toisin kuin edellinen kysymykseni, en aio olla kiinteitä pikselileveyksiä näihin osiin.

Huomautus: Uskon mobiili-ensimmäiseen muotoiluun, mutta en ymmärrä miksi mitään tätä ei pidetä "reagoivana". Haluan muuttaa kokoa ja näyttää / piilottaa osioita laitteen ja suunnan mukaan. Mutta Zurbilla ei näytä olevan vieritys- ja täyskorkeusosioita.

vastaukset:

5 vastauksesta № 1

Tärkeimpiä asioita, jotka oli tehtävä vaatimustesi perusteella:

Ensinnäkin käytä sivun koko leveyttä

Haluat asettelun täyttävän koko sivun ja tehdä niin, että sinun on ohitettava tällainen säätiöluokka:

.row {
max-width: 100%;
}

Toiseksi kiinni alatunnisteesta pohjaan joten voit käyttää vierityspalkkia B ja E. Tässä on tahmea CSS, jonka muutin saadakseni sen toimimaan säätiön mallin kanssa.

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

Avain ovat neljä kontti-divs: kääri, otsikko, pää ja alatunniste. Oletan, että otsikkossasi on kiinteä korkeus, koska se voisi olla banneri tai valikko, jotta voit lisätä luokan seuraavaan koodiin (katso kolmas kohta).

Kolmanneksi, anna keskimmäisen DIV: n venyttää joten niillä on vierityspalkkeja pitkiä sisältöä varten

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

Huomaa kuitenkin, että vaikka osat B ja E on herkkä siinä, että ne pinoavat toistensa päälle, korkeus on kiinteä ja mielestäni odotat, että se tapahtuu, kun haluat vierittää vierityspalkin kummassakin.

Kuten mainitsit kommentissanne, että minunaiempi koodi ei toimi, ja siksi, jos katsot sitä mobiililaitteella, sinulla on pieni alue, jolla voit työskennellä. Mitä pienempi laite saa sen vähemmän todellisen tilan. Sinun tarvitsee vain päättää missä vaiheessa et halua vierittää pääosastoasi (kohdat B ja E).

Se ei ole hyvä idea, että annat käyttäjillevieritä joitain sivustosi osia. Salli heidän joutua vaikeuksiin vierittää muille osille (loput sivulle) ainoastaan, jotta he voivat vierittää uudelleen toisessa osassa. Ja se on ennen kuin ne pääsevät sivun alaosaan. Joten sinun on perustuttava tähän ehdotukseen:

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

Katsokaa sitä toiminnassa täällä. Näet siellä, että pienillä laitteilla,alatunniste tarttuu pohjaan kahdella säiliöllä päällekkäin päällekkäin. Työpöydän näkymässä alatunniste tarttuu suoraan alareunaan ja sinulla on rullanpäimet pääaineistoa varten tarvittaessa.


Liittyvät kysymykset


Kommentit (0)

Lisää kommentti