Zurb 4 अलग स्क्रॉल वर्गों

Question

मैं एक पहले से पूछा प्रश्न का उत्तर के आधार पर एक पूर्ण स्क्रीन लेआउट है

CSS fullscreen grid layout (with some scrolling sections)

वायरफ़्रेम मैं उपयोग कर रहा हूँ:

संपादित करें: यह एक बहुत ही समान लेआउट व्यवहार है जिसे मैं ज़र्ब 4 में पुन: बनाना चाहता हूं (चौड़ाई और ऊंचाई को ठीक करने की आवश्यकता नहीं है): http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html

अच्छा काम करता है, फिर भी मैं अब फाउंडेशन 4 Zurb में एक ही/समान लेआउट मॉडल करने के लिए प्रयास कर रहा हूं, लेकिन दो बातें साथ परेशानी हो रही:

1. यह कैसे मैं बी और ई पुस्तक खड़ी और स्वतंत्र रूप से (हो सकता है स्पष्ट नहीं है मैक पर Mail.app लेआउट सोचें)

2. यह स्पष्ट नहीं है कि मेरे पास स्क्रीन के नीचे सी और एफ कैसे तय हो सकता है।

मेरे पिछले प्रश्न के विपरीत, मैं इन वर्गों के लिए निश्चित पिक्सेल चौड़ाई रखने की योजना नहीं बना रहा हूं।

नोट: मैं मोबाइल-प्रथम डिजाइन में विश्वास करता हूं, लेकिन मुझे नहीं लगता कि इनमें से किसी को 'उत्तरदायी' क्यों नहीं माना जाएगा। मैं डिवाइस और अभिविन्यास के आधार पर अनुभागों का आकार बदलने और दिखाने/छिपाने की योजना बना रहा हूं। लेकिन स्क्रबिंग और पूर्ण-ऊंचाई वाले वर्ग ज़र्ब से गायब हैं।

Answer 1

वहाँ मुख्य बातों आपकी आवश्यकता के आधार पर किया जा करने के लिए आवश्यक है कि:

सबसे पहले, का उपयोग पेज की पूरी चौड़ाई

आप लेआउट पूरे पृष्ठ को भरने के लिए और है कि आप की जरूरत है क्या करना चाहते हैं ,

.row { 
    max-width: 100%; 
} 

दूसरा तल के पाद लेख छड़ी तो आपके लिए एक स्क्रॉल पट्टी हो सकता है: इस तरह की एक फाउंडेशन वर्ग को ओवरराइडऔर 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;} 

कुंजी चार कंटेनर divs हैं: रैप, हेडर, मुख्य और पाद लेख। मुझे लगता है कि आपके हेडर की निश्चित ऊंचाई होगी क्योंकि यह बैनर या मेनू हो सकता है ताकि आप निम्न कोड पर कक्षा जोड़ सकें (तीसरा बिंदु देखें)।

तीसरा, मध्य DIVs लंबे सामग्री के लिए तो वे स्क्रॉल है सलाखों खिंचाव

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

See it in action here। आप वहां देखेंगे कि छोटे उपकरणों पर, पाद लेख दूसरे के शीर्ष पर बने दो कंटेनर के साथ नीचे तक टिकेगा। डेस्कटॉप दृश्य पर, पाद लेख नीचे दाईं ओर चिपकेगा और यदि आवश्यक हो, तो आपके पास मुख्य सामग्री के लिए स्क्रॉलबार होंगे।