मैं कैसे बता सकता हूं कि एक फ्लेक्सबॉक्स लेआउट पंक्ति ब्राउज़र विंडो में शेष ऊर्ध्वाधर स्थान का उपभोग करती है?
मेरे पास एक 3-पंक्ति फ्लेक्सबॉक्स लेआउट है। पहली दो पंक्तियाँ निश्चित ऊँचाई वाली हैं, लेकिन तीसरी गतिशील है और मैं चाहूँगा कि यह ब्राउज़र की पूरी ऊँचाई तक बढ़े।
मेरे पास पंक्ति -3 में एक और फ्लेक्सबॉक्स है जो कॉलम का एक सेट बनाता है। इन स्तंभों के भीतर तत्वों को ठीक से समायोजित करने के लिए मुझे उन्हें ब्राउज़र की पूरी ऊंचाई को समझने की आवश्यकता है - आधार पर पृष्ठभूमि के रंग और आइटम संरेखण जैसी चीजों के लिए। प्रमुख लेआउट अंततः इससे मिलता जुलता होगा:
.vwrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
//height: 1000px;
}
.vwrapper #row1 {
background-color: red;
}
.vwrapper #row2 {
background-color: blue;
}
.vwrapper #row3 {
background-color: green;
flex 1 1 auto;
display: flex;
}
.vwrapper #row3 #col1 {
background-color: yellow;
flex 0 0 240px;
}
.vwrapper #row3 #col2 {
background-color: orange;
flex 1 1;
}
.vwrapper #row3 #col3 {
background-color: purple;
flex 0 0 240px;
}<body>
<div class="vwrapper">
<div id="row1">
this is the header
</div>
<div id="row2">
this is the second line
</div>
<div id="row3">
<div id="col1">
col1
</div>
<div id="col2">
col2
</div>
<div id="col3">
col3
</div>
</div>
</div>
</body>मैंने एक heightविशेषता जोड़ने की कोशिश की है , जो तब काम करता है जब मैं इसे एक हार्ड नंबर पर सेट करता हूं, लेकिन जब मैं इसे सेट नहीं करता हूं 100%। मैं समझता हूं कि height: 100%यह काम नहीं कर रहा है, क्योंकि सामग्री ब्राउज़र विंडो नहीं भर रही है, लेकिन क्या मैं फ्लेक्सबॉक्स लेआउट का उपयोग करके विचार को दोहरा सकता हूं?