2015-08-05 24 views
7

में मैं एक फ्लेक्सबॉक्स चिपचिपा पाद लेख कैसे ठीक करूं? मैंने फ्लेक्सबॉक्स का उपयोग करके एक चिपचिपा पाद लेख बनाया है। यह आईई 11 के अलावा सभी ब्राउज़रों में काम करता है।आईई 11

Codepen

html { 
 
    box-sizing: border-box; 
 
} 
 

 
*, *:before, *:after { 
 
    box-sizing: inherit; 
 
} 
 

 
.Page { 
 
    min-height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; 
 
} 
 

 
.Page-header { 
 
    background: blue; 
 
} 
 

 
.Page-footer { 
 
    background: green; 
 
} 
 

 
.Page-body { 
 
    background: red; 
 
    flex: 1; 
 
}
<div class="Page"> 
 
    <header class="Page-header"> 
 
    HEADER 
 
    </header> 
 
    <div class="Page-body"> 
 
    BODY 
 
    </div> 
 
    <footer class="Page-footer"> 
 
    FOOTER 
 
    </footer> 
 
</div>

क्यों IE11 में टूट रहा है और मैं इसे कैसे ठीक कर सकते हैं?

उत्तर

6

समस्या यह है कि आईई 11 फ्लेक्सबॉक्स में min-height का सम्मान नहीं होगा, इसलिए फ्लेक्स बॉक्स इसकी सामग्री की ऊंचाई तक गिर जाता है।

आप अपने फ्लेक्सबॉक्स को दूसरे फ्लेक्सबॉक्स के अंदर लपेटकर ठीक कर सकते हैं जिसमें flex-direction: column भी है। आपको अपने मूल फ्लेक्सबॉक्स पर flex: 1 सेट करने की भी आवश्यकता होगी। किसी कारण से यह नेस्टेड फ्लेक्सबॉक्स को किसी भी min-height का सम्मान करने के लिए मजबूर करता है।

Codepen

html { 
 
    box-sizing: border-box; 
 
} 
 

 
*, *:before, *:after { 
 
    box-sizing: inherit; 
 
} 
 

 
.Wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.Page { 
 
    min-height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; 
 
} 
 

 
.Page-header { 
 
    background: blue; 
 
} 
 

 
.Page-footer { 
 
    background: green; 
 
} 
 

 
.Page-body { 
 
    background: red; 
 
    flex: 1; 
 
}
<div class="Wrapper"> 
 
    <div class="Page"> 
 
    <header class="Page-header"> 
 
     HEADER 
 
    </header> 
 
    <div class="Page-body"> 
 
     BODY 
 
    </div> 
 
    <footer class="Page-footer"> 
 
     FOOTER 
 
    </footer> 
 
    </div> 
 
</div>

+4

IE11 में अच्छा काम नहीं करता जब 'की सामग्री .Page-body' बड़ा हो जाता है तो यह मूल ऊंचाई है: [codepen] (http: // कोड pen.io/cakeseller/pen/xOopLk) –

+0

@Cake_Seller, क्या आपने इस समस्या को हल किया जब आंतरिक सामग्री मूल कंटेनर से बड़ी हो जाती है? –

+0

@ArtyomPranovich नहीं, दुर्भाग्य से नहीं। –

14

प्रयास करें

flex: 1 0 auto; 
सामग्री ब्लॉक के लिए

+0

यह मेरे लिए काम किया। – tptcat

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