एक ग्रिड लेआउट ढांचे के साथ स्थिर स्थिति का उपयोग करना

तो मैं एक वेब पेज, जहां बाएं हाथ की ओर मेनू तय कर रहे हैं (वे आप का पालन करें जब आप पृष्ठ ऊपर और नीचे स्क्रॉल और) बनाने रहा हूँ। मैं वर्तमान में ग्रिड लेआउट का उपयोग कर रहा हूं: फाउंडेशन (ज़र्ब द्वारा) http://foundation.zurb.com/docs/grid.php। जो बारह कॉलम ग्रिड का उपयोग करता है। मुझे निश्चित लेआउट की स्थिति में समस्याएं आ रही हैं और अभी भी एक ही समय में ग्रिड का उपयोग कर रही हैं। मैं पृष्ठ पर ग्रिड लेआउट और निश्चित तत्वों का उपयोग कैसे कर सकता हूं?एक ग्रिड लेआउट ढांचे के साथ स्थिर स्थिति का उपयोग करना

<div class="container"> 
    <div class="row"> 
     <div class="four columns relativePosition"> 
       <div class="fixedPosition"> 
        <div class="four columns"> 
         Menu Here 
        </div> 
       </div> 
     </div> 
     <div class="eight columns"> 
       Other Content 
     </div> 
    </div> 
</div>

मैं इस संरचना का उपयोग लेकिन कुछ मामलों में मेनू की सामग्री को बहुत बड़ा बढ़ता है काम करते हैं और आठ कॉलम की सामग्री ओवरलैप निश्चित स्थिति प्राप्त करने में सक्षम था। मुझे नहीं पता कि ऐसा करने का कोई बेहतर तरीका है या नहीं?

स्रोत

2012-02-29 Adim

मिले इस लेख - ZURB + ScrollSpy। यह 5 मिनट में काम कर रहा है। मैंने पाया कि ग्रिड स्थिति के नीचे scrollspy div में साइडबार सामग्री को लपेटना।

स्रोत

2012-11-20 17:16:42 cosmicdot

मुझे लगता है कि यदि आपके पास उस पृष्ठ का एक घटक है जो वैसे भी तय किया गया है, तो सबसे आसान काम यह है कि 'फाउंडेशन' ग्रिड से पूरी तरह से div खींचें। फिर, ग्रिड के बाहर, आप इसे fixed के रूप में स्थान दे सकते हैं और यह ग्रिड के साथ बिल्कुल भी बातचीत नहीं करेगा। यदि मेनू को भी एक लचीली ग्रिड होने की आवश्यकता है, तो इसे एक-एक करके मुख्य ग्रिड से अलग करें।

स्रोत

2012-03-21 08:57:09 Ian128K

एक समस्या को हल करने के लिए इस overkill की तरह लगता है की तरह जावास्क्रिप्ट का उपयोग करना। मैं इस तरह फाउंडेशन के ऑफसेट कक्षाओं का उपयोग करके मूल बातें करने के लिए रखने की कोशिश करेंगे:

<div class="row twelve columns"> 
    <div class="two columns" style="position:fixed;top:0;bottom:0;overflow-x:hidden;overflow-y:auto;"> 
    Menu 
    <ul><li>Menu Item</li></ul> 
    </div> 
    <div class="ten columns offset-by-two"> 
    Content goes here 
    </div> 
</div>

आशा इस मदद करता है!

स्रोत

2013-02-19 08:50:10 Marz

इस काम नहीं करेगा। कहो स्क्रीन आकार 1200px है। पृष्ठ चौड़ाई 1000px है। आप एक निश्चित तत्व है जो कहते हैं कि 10% चौड़ाई देता है के लिए एक स्तंभ वर्ग आवेदन करते हैं, तो निश्चित तत्व 1200px = 120px' की '10% की चौड़ाई मिल जाएगा। ऐसा इसलिए है क्योंकि 'स्थिति: फिक्स्ड' वाले तत्वों की व्यूपोर्ट के संबंध में उनकी चौड़ाई की गणना की जाती है, माता-पिता divs नहीं। जबकि कुछ भी जो निश्चित स्थिति नहीं है, उसे 1000px = 100px' की '10% की चौड़ाई मिलेगी। –

एक ग्रिड लेआउट ढांचे के साथ स्थिर स्थिति का उपयोग करना

उत्तर

संबंधित मुद्दे