ZURB 4 sekcje oddzielnie przewijalne

Question

mam pełny układ ekranu w oparciu o odpowiedź na wcześniej zadane pytanie:

CSS fullscreen grid layout (with some scrolling sections)

Wireframe Używam:

Edit: To jest bardzo podobne zachowanie układu, które zamierzam odtworzyć w Zurb 4 (szerokość i wysokość nie muszą być naprawione): http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html

Działa świetnie, ale jestem teraz próbuje modelować sam/podobny układ w ZURB Foundation 4, ale kłopoty z dwóch rzeczy:

1. Nie wiadomo, w jaki sposób mogę mieć B i E przewijania w pionie i niezależnie (Myślę, że układ Mail.app na komputerze Mac)

2. Nie jest jasne, w jaki sposób mogę ustawić C i F na dole ekranu.

W przeciwieństwie do mojego poprzedniego pytania, nie planuję mieć stałych szerokości pikseli dla tych sekcji.

Uwaga: Wierzę w projektowanie mobilne, ale nie widzę powodu, dla którego którekolwiek z nich nie byłoby uważane za "responsywne". Mam zamiar zmienić rozmiar i pokazać/ukryć sekcje w zależności od urządzenia i orientacji. Wygląda na to, że w Zurb brakuje części przewijanych i pełnowymiarowych.

Answer 1

Nie główne rzeczy, które trzeba zrobić na podstawie zapotrzebowania:

pierwsze, należy całą szerokość strony za

aby układ, aby wypełnić całą stronę i zrobić, że trzeba zastąpić klasę Foundation takiego:

.row { 
    max-width: 100%; 
} 

drugie, trzymać stopkę do dolnej więc można mieć pasek przewijania dla B i E. Oto przyklejony CSS, który zmodyfikowałem, aby działał z szablonem Foundation.

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

Kluczem są cztery pojemniki div: wrap, header, main i footer. Zakładam, że twój nagłówek będzie miał stałą wysokość, ponieważ może to być baner lub menu, dzięki czemu możesz dodać klasę do poniższego kodu (patrz trzeci punkt).

trzecie, niech środkowe DIV rozciągnąć więc mają paski przewijania dla długich zawartości

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

biorą pod uwagę jednak, że podczas gdy sekcje B i E będą czuły, że będą one stos na siebie, Wysokość zostanie poprawiona i myślę, że oczekujesz, że tak się stanie, ponieważ chcesz mieć pasek przewijania na każdym z nich.

Jak już wspomniałeś w swoim komentarzu, że mój poprzedni kod nie działa, a to dlatego, że jeśli przeglądasz go na urządzeniu mobilnym, masz mały obszar do pracy. Im mniejsze urządzenie, tym mniej rzeczywisty stan masz. Co musisz zrobić, to zdecydować, , w którym momencie NIE będziesz chciał przewinąć głównej treści (sekcje B i E).

To nie jest dobry pomysł, aby pozwolić użytkownikom przewinąć określone części witryny. Następnie niech ciężko przewijają pozostałe sekcje (resztę strony), aby przewinąć je ponownie w innej sekcji. I to jest zanim dotrą na dół strony. To, czego potrzebujesz na podstawie tej sugestii, to:

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

See it in action here. Zobaczysz tam, że na mniejszych urządzeniach stopka przyklei się do dna z dwoma kontenerami ułożonymi jeden na drugim. W widoku pulpitu stopka zostanie przyklejona do samego dołu, aw razie potrzeby będą dostępne paski przewijania głównej zawartości.