/ / Zurb 4 отделно скроируеми секции - zurb-foundation

Zurb 4 отделно превъртаеми секции - zurb-foundation

Имам оформление на цял екран, базирано на отговор на въпрос, зададен по-рано:

CSS оформление на цял екран на мрежата (с някои раздели за превъртане)

Ширина, която използвам:

въведете описанието на изображението тук

Редактиране: Това е много подобно поведение на оформлението, което искам да пресъздам в Zurb 4 (ширини и височини не е необходимо да се фиксират): http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html

Работи чудесно, но сега се опитвам да моделирам същото / подобно оформление в Zurb Foundation 4, но имам проблеми с две неща:

  1. Не е ясно как бих могъл да имам B и E да превъртам вертикално и независимо (мисля, че Mail.app оформлението на Mac)

  2. Не е ясно как може да има C и F фиксирани в долната част на екрана.

За разлика от предишния ми въпрос, нямам намерение да имам фиксирани ширини на пиксели за тези секции.

Забележка: Вярвам в първокласния дизайн на мобилни устройства, но не разбирам защо това няма да се счита за "отзивчива". Имам намерение да променя размера и да показва / скривам секции в зависимост от устройството и ориентацията. Но се вижда, че секциите с превъртане и пълната височина липсват от Зърб.

Отговори:

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

Има основни неща, които трябва да се направят въз основа на вашите изисквания:

Първо, използвайте цялата ширина на страницата

Искате оформлението да запълни цялата страница и за да направите това, трябва да замените класа на фондацията по следния начин:

.row {
max-width: 100%;
}

Второ, залепете долния край така че можете да имате лента за превъртане B и E, Тук е лепкава CSS, която модифицирах, за да работи с шаблона на Фондацията.

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

Ключът са четирите контейнера divs: обвивка, заглавна част, основна и долна част. Предполагам, че заглавката ви ще има фиксирана височина, тъй като може да е банер или меню, така че да можете да добавите класа към следния код (вж. Трета точка).

Трето, нека средните DIV се простират така че те имат ленти за превъртане за дълго съдържание

#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)

Добави коментар