/ / Zurb 4 külön-külön lapozható szakasz - zurb-alapozás

Zurb 4 külön-külön mozgatható szakasz - zurb-alapozás

Van egy teljes képernyős elrendezés a korábban feltett kérdésekre adott válasz alapján:

CSS teljes képernyős rács elrendezése (néhány görgetési szakaszban)

Wireframe I "m segítségével:

itt írja be a kép leírását

Szerkesztés: Ez egy nagyon hasonló elrendezési viselkedés, amit a Zurb 4-ben szeretnék újra létrehozni (a szélességet és a magasságot nem kell rögzíteni): http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html

Nagyon jól működik, de most megpróbálom ugyanazt a hasonló elrendezést kidolgozni a Zurb Foundation 4-ben, de két dologgal baj van:

  1. Nem világos, hogy lehet, hogy a B és az E függőlegesen és önállóan lapozhat (gondolja a Mail.app elrendezést Mac-en)

  2. Nem világos, hogy lehet, hogy C és F a képernyő aljára rögzül.

Ellentétben a korábbi kérdésemmel, nem tervezem fix pixelszélességet ezekre a részekre.

Jegyzet: Hiszek a mobil-első formatervezésben, de nem látom, hogy miért nem tekinthető ilyennek "érzékeny". Úgy tervezem, hogy átméretezik és megmutatják / elrejtik a szekciókat az eszköz és a tájolás függvényében. De a görgetés és a teljes magasságú szakaszok hiányoznak a Zurb-ból.

válaszok:

5 a válasz № 1

A legfontosabb dolog, amit az Ön igényeinek megfelelően kell elvégezni:

Először használja az oldal teljes szélességét

Azt szeretné, hogy az elrendezés betöltse az egész oldalt, és tegye meg, hogy felül kell hagynia egy ilyen alapítványi osztályt:

.row {
max-width: 100%;
}

Másodszor, ragassza fel a láblécet az aljára így van egy görgetősáv is B és E. Itt van egy tapadós CSS, amelyet módosítottam, hogy az alapítvány sablonjával dolgozzon.

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

A kulcs a négy konténerszakasz: wrap, fejléc, fő és lábléc. Feltételezem, hogy a fejlécnek rögzített magassága lesz, mivel lehet egy szalaghirdetés vagy menü, így hozzáadhatja az osztályt a következő kódhoz (lásd a harmadik pontot).

Harmadszor, hagyd, hogy a középső DIV-ek nyúljanak így hosszú tartalommal rendelkeznek görgetősávokkal

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

Vegye figyelembe azonban, hogy miközben szakaszok B és E érzékenyek lesznek abban, hogy egymásra rakják egymást, a magasság rögzül, és úgy gondolom, hogy azt várják, hogy mindegyiküknél görgetősávra vágyik.

Ahogy megemlítetted a megjegyzésedben, hogy az énaz előző kód nem működik, és ez azért van, mert ha mobileszközön nézed meg, akkor van egy kis területed, ahol együtt dolgozhatsz. Minél kisebb a készülék, annál kevésbé valós állapotot kap. Mit kell tennie, hogy eldöntöd milyen ponton nem szeretné a fő tartalmat görgetni (szakaszok B és E).

Nem jó ötlet, hogy hagyja a felhasználókatgörgessen a webhely bizonyos részein. Akkor ne felejtse el nehezen görgetni a többi részt (az oldal többi részét), hogy csak más szekcióban görgethesse őket. És ez még azelőtt eléri az oldal alját. Tehát, amire szükséged van erre a javaslatra alapozva:

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

Lássuk itt a cselekvést. Látni fogja, hogy kisebb eszközökön, aa lábléc az aljához ragaszkodik, és a két tartály egymásra tetejére kerül. Az asztali nézetben a lábléc közvetlenül az aljára fog ragadni, és ha szükséges, a fő tartalomhoz görgetősáv lesz.


Kapcsolódó kérdések


Hozzászólások (0)

Hozzászólni