2017-01-15 17 views
8

सामग्री डिजाइन और फ्लेक्स-लेआउट का उपयोग कर कोणीय ऐप। https://github.com/angular/flex-layoutकोणीय 2 फ्लेक्स-लेआउट ऊंचाई 100%

मैं शीर्ष पर बाईं ओर 2-कॉलम का एक साधारण पृष्ठ लेआउट बनाने की कोशिश कर रहा हूं (बाएं = भरें, दाएं = 10%), स्क्रीन के नीचे एक पंक्ति के बाद। तत्व अभी भी केवल सामग्री के लिए आवश्यक लंबवत स्थान भर रहे हैं। ऐसा करने का एकमात्र तरीका यह है कि मैन्युअल रूप से 100% तक सेट करना है। क्या मुझे यह करना है? इस एचटीएमएल में क्या गलत है?

<div fxLayout="column"> 
    <div fxLayout="row" fxFlex="90%"> 
    <div fxFlex="80%" class="border"> 
     <p>Stuff is happening here</p> 
    </div> 
    <div fxFlex="20%" class="border"> 
     <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     </ul> 
    </div> 
    </div> 
    <div fxLayout="row" fxFlex="10%" class="border"> 
    <p>Bottom element</p> 
    </div> 
</div> 

परिणाम:

enter image description here

उत्तर

4

स्थापना ऊंचाई से 100% शायद वास्तव में जाने का रास्ता है। ऊंचाई गतिशील है इसलिए यह आपकी सामग्री के अनुकूल होगा। आपके मामले में सामग्री पृष्ठ को भरती नहीं है, इसलिए यह एक सामान्य व्यवहार है।

हालांकि इस समाधान के साथ क्या गलत है?

+2

मुझे लगता है कि इसमें कुछ भी गलत नहीं है .. मुझे लगता है कि तत्व 100% तक जोड़े गए हैं तो कॉलम 100% स्क्रीन ऊंचाई भर जाएगी, लेकिन ऐसा नहीं है। वे केवल अपने माता-पिता का 100% भरते हैं, जो एक निश्चित मूल्य के बिना ही सामग्री के जितना बड़ा होगा। अब यह समझ में आता है कि मैंने इसे और अधिक विचार दिया है। –

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