सफारी ऊंचाई अधिकतम ऊंचाई तत्व के अंदर 100% तत्व

Question

मैं यह पता लगाने की कोशिश कर रहा हूं कि सफारी ऊंचाई के रूप में अपने माता-पिता की अधिकतम ऊंचाई विशेषता क्यों नहीं पढ़ेगी। क्रोम और फ़ायरफ़ॉक्स दोनों इसे सही ढंग से पढ़ेंगे, लेकिन सफारी माता-पिता की अधिकतम ऊंचाई को अनदेखा कर देती है और इसके बजाय पृष्ठ की पूर्ण ऊंचाई को पकड़ लेती है।

आप देख सकते हैं यह here

सीएसएस:

body, html { 
    height: 100%; 
    margin: 0; 
} 
div { 
    height: 100%; 
    max-height: 300px; 
    width: 100px; 
} 
div span { 
    background: #f0f; 
    display: block; 
    height: 100%; 
} 

मार्कअप:

<div> 
    <span></span> 
</div> 

मैं OSX 10.8.5 पर सफारी 6.0.5 का उपयोग कर रहा हूँ।

Answer 1

यह समस्या वेबकिट में एक रिपोर्ट बग के कारण होता है:

Bug 26559 - When a block's height is determined by min-height/max-height, children with percentage heights are sized incorrectly

यह अब तक क्रोम के लिए तय किया जा रहा है, लेकिन सफारी के लिए नहीं।

div {  
    position: absolute; 
} 

डेमो

Try before buy

Answer 2

इसी समस्या तो आप Safari पर प्रकट होता है:

केवल गैर- JavaScript वैकल्पिक हल है कि मेरे लिए काम किया, माता पिता के तत्व पर एक निरपेक्ष स्थिति उपयोग कर रहा है मूल तत्व flexbox गुणों का उपयोग करता है - कंटेनर ऊंचाई का 100% नहीं लेगा। एक अन्य समाधान (position: absolute; के अलावा) vh (व्यूपोर्ट ऊंचाई) इकाइयों का उपयोग करने के होगा:

div { 
height: 100vh; 
}