/ / Зурб 4 одвојени дијелови - зурб-фоундатион

Зурб 4 одвојени дијелови - зурб-фоундатион

Имам распоред целог екрана на основу одговора на претходно постављено питање:

ЦСС приказ целокупног мрежног грида (са неким дијеловима скроловања)

Вирефраме И користим:

унесите опис слике овде

Измена: Ово је врло слично понашање у облику које желим да обрадим у Зурбу 4 (ширине и висине не морају да се исправљају): http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html

Делује сјајан, али сада покушавам да моделујем исти / сличан изглед у Фондацији Зурб 4, али имам проблема са две ствари:

  1. Нејасно је како могу да се Б и Е помичу вертикално и независно (размишљај Маил.апп на Мац-у)

  2. Нејасно је како бих могао имати Ц и Ф фиксиран на дну екрана.

За разлику од мог претходног питања, не планирам да има фиксне ширине пиксела за ове одељке.

Белешка: Верујем у првокласни дизајн, али не видим зашто се ово не би сматрало "одговорним". Ја планирам да променим величину и покажем / сакриј секције у зависности од уређаја и оријентације. Међутим, изгледа да се од Зурба не помичу скроловање и пуне висине.

Одговори:

5 за одговор № 1

Постоје главне ствари које су требале бити обављене на основу вашег захтева:

Прво, користите цијелу ширину странице

Желите да поставка попуни целу страницу и да то урадите, морате превазићи класу Фондације овако:

.row {
max-width: 100%;
}

Друго, поставите подножје на дно тако да можете имати траку за померање B и E. Ево лепљивог ЦСС-а који сам модификовао како бих је сарађивао са темплатеом Фондације.

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

Кључ су четири контејнерска дивс: завој, заглавље, главни и подножје. Претпостављам да ће ваш заглавље имати фиксну висину јер може бити банер или мени тако да можете додати класу на сљедећи код (види трећу тачку).

Треће, нека се средња ДИВ-а растегне тако да имају дугмад за скроловање за дуге садржаје

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

Узмите у обзир и то иако секције B и E ће бити одзив у томе што ће се стацкати један преко другог, висина ће бити фиксирана и мислим да очекујете да ће се то десити онако како желите бар за померање на сваком од њих.

Као што сте у свом коментару поменули да је мојпретходни код не ради и то је зато што ако га видите на мобилном уређају, имате мањи простор за рад. Што је мањи уређај постаје мање стварно стање које имате. Оно што треба да урадите је да одлучите на којој тачки НИЈЕ желели да померате свој главни садржај (секције B и E).

Није добра идеја да пустите своје корисникепомерајте одређене делове ваше странице. Затим немојте имати тешко вријеме да се померате до остатка одељка (остатак странице) само да их поново померите у другом делу. И то је пре него што стигну до дна странице. Дакле оно што вам треба на основу тог предлога је:

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

Погледајте овде у акцији. Ви ћете тамо видети на мањим уређајимаподножје ће се држати дна са два контејнера постављена на врху друге. У приказу радне површине, подножје ће се налазити право на дно и по потреби ћете имати навигацијске траке за главни садржај.


Сродна питања


Коментари (0)

Додајте коментар