एक न्यूनतम ऊंचाई विशेषता वाले माता-पिता से बच्चे के div की विरासत ऊंचाई

मुझे खेद है कि यह एक पुरानी समस्या है या ज्ञात समस्या है, लेकिन मुझे ऑनलाइन जवाब नहीं मिला है। अगर मैं कोडएक न्यूनतम ऊंचाई विशेषता वाले माता-पिता से बच्चे के div की विरासत ऊंचाई

<style> 
    html, body { height: 100%; width: 100%;} 
    #div1 {height:50%; min-height:200px;background-color:red;} 
    #div2 {height:100%; background-color:black;} 
</style> 
<body> 
<div id="div1"><div id="div2"></div></div> 
</body>

है तो फ़ायरफ़ॉक्स में काले भीतरी div के रूप में स्क्रीन सिकुड़ता है और 200px ऊंचाई पर बंद हो जाता है सिकुड़ता है। हालांकि एक वेबकिट ब्राउज़र में लाल बाहरी div बंद हो जाता है लेकिन आंतरिक div कम हो जाता है जैसे कि यह न्यूनतम ऊंचाई विशेषता के बिना मूल div में था।

क्या वेबकिट संस्करण को फ़ायरफ़ॉक्स प्रतिपादन के साथ लाने में कोई आसान समस्या है? एक min-height:inherit आंतरिक div पर रखा गया है, लेकिन एक के भीतर कई divs के मामले में प्रत्येक बच्चे div पर min-height:inherit की आवश्यकता होगी। क्या कोई और सुरुचिपूर्ण समाधान है?

स्रोत

2010-09-27 Phil

हां, यह एक वेबकिट बग है, bug 26559।

height% स्थिर या रिश्तेदार-तैनात तत्वों पर में गणना की ऊंचाई को ध्यान में min-height और max-height लेने के बजाय धारक ब्लॉक की घोषित height संपत्ति के सापेक्ष गणना की जाती है,। चौड़ाई के लिए ऐसा नहीं होता है।

आप यह देख सकते हैं कि यह CSS 2.1 में कहां से आता है, जिसमें कहा गया है कि एक ब्लॉक ब्लॉक की ऊंचाई को काम करने के लिए % के लिए स्पष्ट रूप से सेट किया जाना चाहिए। लेकिन यह स्पष्ट रूप से नहीं बताया गया है कि 'स्पष्ट रूप से' क्या अर्थ है! ब्राउज़रों ने इसका अर्थ यह लिया है कि height संपत्ति को गैर-ऑटो मान पर सेट किया जाना चाहिए, जो height को छोड़कर पर्याप्त उचित है, अब ऊंचाई नहीं है। अन्य ब्राउज़रों को उपयोग करने के लिए ऊंचाई को प्रभावित करने के लिए min-height/max-height की अनुमति दें, लेकिन इसे 'स्पष्ट' करने की अनुमति न दें। वेबकिट आगे बढ़ता है (और यह निश्चित रूप से spec द्वारा अनिवार्य नहीं है) का उपयोग करके केवलheight कैल्केशन में और न्यूनतम/अधिकतम नहीं है।

एक कामकाज के रूप में, आप पूर्ण स्थिति की कोशिश कर सकते हैं, जो प्रभावित नहीं है। सापेक्ष स्थिति बाहरी div, आंतरिक स्थिति left: 0; top: 0; width: 100%; height: 100% पर आंतरिक स्थिति।

स्रोत

2010-09-27 23:48:01 bobince

उत्तर के लिए धन्यवाद, यह पहली बार है जब मैंने फ़ायरफ़ॉक्स और वेबकिट के प्रतिपादन को अलग करने के लिए पाया है और यह मुझे दीवार को चला रहा था। सीएसएस स्पेक का उल्लेख करने के लिए – Phil

+1; जो मेरे लिए मुद्दों को साफ़ करता है। दिलचस्प बात यह है कि यदि आप बच्चे की ऊंचाई को 'ऊंचाई-ऊंचाई: 100% 'ऊंचाई के बजाय 100%' निर्दिष्ट करते हैं, तो यह काम करता है - लेकिन केवल ओपेरा में। मेरे दिमाग में, यह उचित व्यवहार होना चाहिए, लेकिन ऐसा नहीं, spec के अनुसार। शायद किसी को spec के खिलाफ एक बग फाइल करना चाहिए :) –

मुझे लगता है कि यह केवल दो ब्राउज़र के डिफ़ॉल्ट सीएसएस के बीच अंतर है। इसे आज़माएं:

<style> 
    div {min-height: inherit;} 
    #div1 {height:50%; min-height:200px;background-color:red;} 
    #div2 {height:100%; background-color:black;} 
</style>

यह मेरे लिए काम करता है।

स्रोत

2010-09-27 23:25:42

हाँ जो चाल करेगा। यदि आप अवधि और अन्य टैग का उपयोग कर रहे हैं तो आप इसके बजाय '# div1 * {min-height: legisl}} का उपयोग कर सकते हैं। उत्तर के लिए धन्यवाद - यह मेरी तुलना में एक बेहतर फिक्स है! – Phil

मुझे क्रोम में एक खाली div (ओएसएक्स 10.6) पर न्यूनतम ऊंचाई के साथ कोई समस्या थी। मुझे नहीं पता कि यह वही बग व्यवहार है लेकिन मैं बॉक्स-साइजिंग विशेषता बदलने के साथ अपना समाधान पाता हूं।

क्रोम मैक में काम नहीं:

box-sizing:border-box; 
min-height:10px; 
padding-bottom:15px; 
padding-top:30px;

क्रोम मैक में कार्य करना:

box-sizing:content-box; 
min-height:10px; 
padding-bottom:15px; 
padding-top:30px;

आशा है कि मदद करता है।

स्रोत

2012-02-08 16:29:11 Mik

मैं अपना समाधान पोस्ट करना चाहता हूं क्योंकि मुझे अपना कोड काम करने में कुछ समय लगा और शायद इस तथ्य के बावजूद किसी को यह उपयोगी लगेगा कि यह एक पुराना विषय है ...

मुझे एक सिमिलर समस्या थी। माता-पिता फ्लेक्स-बाल ब्लॉक से एक छवि बहती जा रही थी। यह केवल क्रोम और ओपेरा (वेबकिट ब्राउज़र) में हुआ, ट्राइडेंट और गीको स्थिति से निपटने के लिए पर्याप्त स्मार्ट थे। मैंने स्टैक ओवरफ़्लो पर कुछ समाधानों की कोशिश की लेकिन किसी ने भी प्रत्यक्ष समाधान प्रदान नहीं किया है, इसलिए मैंने उपरोक्त छवि और अभिभावक के बीच एक और कंटेनर परत जोड़कर एक वर्कअराउंड का आविष्कार किया है। उद्घाटन के बाद में प्रस्तुत स्थिति में यह दिखाई देगा:

<style> 
    html, body { height: 100%; width: 100%;} 
    #div1 {height:50%; min-height:200px;background-color:red; position: relative;} 
    #div_fix {position: absolute; height: 100%; width: 100%;} 
    #div2 {height:100%; background-color:black;} 
</style> 
<body> 
<div id="div1"><div id="div_fix"><div id="div2"></div></div></div> 
</body>

क्या करता है एक कंटेनर (#div_fix) है कि स्थिर ऊंचाई और चौड़ाई है कि तब ठीक से सही ऊंचाई की गणना करने के वेबकिट में इस्तेमाल किया जा सकता प्राप्त करता है बनाने के है # DIV2। कृपया ध्यान दें कि स्थिति: सापेक्ष और स्थिति: काम करने के लिए पूर्ण गुण अनिवार्य हैं।

और हाँ, यह बुरा लग रहा है, लेकिन काम किया :)

स्रोत

2014-12-11 16:43:29

हमारी परियोजना छवि की जरूरत है और खड़ी क्षैतिज रूप से केंद्रित होने के लिए मिलता है। और हमें स्क्रीन आकार के अनुसार छवि को समायोजित करने की आवश्यकता है।

<style> 
    .parent { 
     height: 100%; 
    } 
    .image { 
     height: 100%; 
     background: url('/path/to/your/image') no-repeat 50% 50%; 
     -o-background-size: contain; 
     -webkit-background-size: contain; 
     -moz-background-size: contain; 
     background-size: contain; 
    } 
</style> 
<div class="parent"> 
    <div class="image"></div> 
</div>

यहाँ 50% 50% छवि को क्षैतिज और ऊर्ध्व रूप से केंद्रित करता है: मुझे लगता है कि पृष्ठभूमि के रूप में छवि डालने मुद्दे को हल पाते हैं।

शामिल यह कीवर्ड निर्दिष्ट करता है कि पृष्ठभूमि छवि जबकि उसके आयाम सुनिश्चित दोनों रूप में संभव के रूप में बड़े होने की स्केल किया जाना चाहिए: और background-size: contain कि पृष्ठभूमि माता पिता की सीमा (MDN background-size) से अधिक है नहीं करता है सुनिश्चित करता है पृष्ठभूमि स्थिति क्षेत्र के संबंधित आयामों से कम या उसके बराबर हैं।

इस तरह, माता-पिता को पूर्ण इकाइयों को निर्दिष्ट करने की आवश्यकता नहीं है। यहां height: 100% पर्याप्त है।

एक दोष यह है: छवि को मूल स्थान में भरने के लिए बढ़ाया जाएगा।

स्रोत

2015-05-13 02:21:57 Joy

एक न्यूनतम ऊंचाई विशेषता वाले माता-पिता से बच्चे के div की विरासत ऊंचाई

उत्तर

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