डिव 100% ऊंचाई फ़ायरफ़ॉक्स पर काम करता है लेकिन आईई

Question

में मेरे पास एक कंटेनर div है जिसमें दो आंतरिक divs हैं; दोनों कंटेनर के भीतर 100% चौड़ाई और 100% ऊंचाई लेनी चाहिए।

मैंने आंतरिक divs को 100% ऊंचाई पर सेट किया है। यह फ़ायरफ़ॉक्स में ठीक काम करता है, हालांकि आईई में divs 100% ऊंचाई तक नहीं फैले हैं बल्कि केवल उनके अंदर पाठ की ऊंचाई है।

निम्नलिखित मेरी स्टाइल शीट का सरलीकृत संस्करण है।

#container 
{ 
    height: auto; 
    width: 100%; 
} 

#container #mainContentsWrapper 
{ 
    float: left; 

    height: 100%; 
    width: 70%; 
    margin: 0; 
    padding: 0; 
} 


#container #sidebarWrapper 
{  
    float: right; 

    height: 100%; 
    width: 29.7%; 
    margin: 0; 
    padding: 0; 
} 

क्या कुछ गलत है? या कोई फ़ायरफ़ॉक्स/आईई quirks मैं याद कर रहा हूँ?

Answer 1

मुझे लगता है कि "ठीक फ़ायरफ़ॉक्स में काम करता है "क्विर्क मोड केवल प्रतिपादन में है। मानक मोड प्रतिपादन में, जो फ़ायरफ़ॉक्स में भी ठीक काम नहीं कर सकता है।

प्रतिशत व्यूपोर्ट के बजाय "ब्लॉक युक्त" पर निर्भर करता है।

CSS Specification says

प्रतिशत उत्पन्न बॉक्स के धारक ब्लॉक की ऊंचाई तक सम्मान के साथ किया जाता है। यदि युक्त ब्लॉक की ऊंचाई स्पष्ट रूप से निर्दिष्ट नहीं है (यानी, यह सामग्री ऊंचाई पर पर निर्भर करता है), और यह तत्व बिल्कुल स्थित नहीं है, मूल्य 'ऑटो' पर गणना करता है।

तो

#container { height: auto; } 
#container #mainContentsWrapper { height: n%; } 
#container #sidebarWrapper { height: n%; } 

मतलब है

#container { height: auto; } 
#container #mainContentsWrapper { height: auto; } 
#container #sidebarWrapper { height: auto; } 

व्यूपोर्ट की 100% ऊंचाई को फैलाने के लिए, आपको धारक ब्लॉक की ऊंचाई निर्दिष्ट करने की आवश्यकता (इस मामले में, यह #container है) । इसके अलावा, आपको शरीर और एचटीएमएल की ऊंचाई निर्दिष्ट करने की भी आवश्यकता है, क्योंकि शुरुआती कंटेनिंग ब्लॉक "UA-dependent" है। ++ आप सही जावास्क्रिप्ट के साथ हो रही है बहुत कम समय खर्च करते हैं की तुलना में आप सीएसएस के साथ यह करने के लिए कोशिश कर रहा होगा

आपको बस है ...

html, body { height:100%; } 
#container { height:100%; } 

Answer 2

आप एक या दोनों डाल करने के लिए हो सकता है:

html { height:100%; } 

या

body { height:100%; } 

संपादित करें: ओह, नोटिस नहीं किया था वे जारी किए गए थे। आपको बस कंटेनर तैरने की जरूरत है।

Answer 3

आपके द्वारा वास्तव में उपयोग किए जा रहे HTML को देखे बिना आपको एक अच्छा जवाब देना मुश्किल है।

क्या आप एक मोडटाइप आउटपुट कर रहे हैं/मानक मोड प्रतिपादन का उपयोग कर रहे हैं? वास्तव में एक एचटीएमएल repro में देखने में सक्षम होने के बिना, यह फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर के बीच एक HTML व्याख्या अंतर के लिए मेरा पहला अनुमान होगा।

Answer 4

मुझे यकीन नहीं है कि आप किस समस्या को हल कर रहे हैं, लेकिन जब मेरे पास दो तरफ से कंटेनर हैं जो समान ऊंचाई होने की आवश्यकता है, तो मैं पेज लोड पर थोड़ा जावास्क्रिप्ट चलाता हूं जो कि दोनों की अधिकतम ऊंचाई और स्पष्ट रूप से मिलता है दूसरे को एक ही ऊंचाई पर सेट करता है। मुझे लगता है कि ऊंचाई: 100% का मतलब यह हो सकता है कि "सामग्री को पूरी तरह से शामिल करने के लिए इसे आकार दें" जब आप वास्तव में चाहते हैं कि "सबसे बड़ी सामग्री का आकार दोनों बनाएं।"

नोट: यदि पृष्ठ पर उनकी ऊंचाई बदलने के लिए कुछ भी होता है तो आपको उन्हें फिर से आकार देने की आवश्यकता होगी - जैसे एक सत्यापन सारांश दिखाई दे रहा है या एक संक्षिप्त मेनू खोलना।

Answer 5

मुझे नहीं लगता कि आईई ऊंचाई/चौड़ाई निर्धारित करने के लिए ऑटो के उपयोग का समर्थन करता है, इसलिए आप इसे एक संख्यात्मक मान देने की कोशिश कर सकते हैं (जैसे जैरेट सुझाव देता है)।

इसके अलावा, ऐसा लगता है कि आप अपनी फ्लोट को ठीक से साफ़ नहीं कर रहे हैं। वास्तव में जावास्क्रिप्ट का उपयोग लगातार onresize तरह की घटनाओं के माध्यम से विंडो में उपलब्ध ऊंचाई नजर रखने के लिए किया जाता है

#container { 
    height:100%; 
    width:100%; 
    overflow:hidden; 
    /* for IE */ 
    zoom:1; 
} 

Answer 6

मैं बहुत क्या 'tvanfosson' कहा करने के लिए कुछ इसी तरह किया है, कि,: प्रयास करें इस #container के लिए अपने सीएसएस को जोड़ने , और तदनुसार कंटेनर आकार को बदलने के लिए उस जानकारी का उपयोग करें (प्रतिशत के बजाय पिक्सल के रूप में)।

ध्यान रखें, यह का अर्थ जावास्क्रिप्ट निर्भरता है, और यह एक सीएसएस समाधान के रूप में चिकनी नहीं है। आपको यह सुनिश्चित करने की भी आवश्यकता होगी कि जावास्क्रिप्ट फ़ंक्शन सही ढंग से सभी प्रमुख ब्राउज़रों में विंडो आयामों को वापस करने में सक्षम है।

हमें बताएं कि पहले उल्लिखित सीएसएस समाधानों में से एक काम करता है, क्योंकि यह समस्या को ठीक करने के बेहतर तरीके की तरह लगता है।

Answer 7

मैं काम करने के लिए जब मैं 0 करने के लिए कंटेनर के हाशिये सेट इस हो रही करने में सफल रहे है:

#container 
{ 
    margin: 0 px; 
} 

अपने सभी अन्य शैलियों के अलावा

Answer 8

इस प्रयास करें ..

#container 
{ 
    height: auto; 
    min-height:100%; 
    width: 100%; 
} 

#container #mainContentsWrapper 
{ 
    float: left; 

    height: auto; 
    min-height:100% 
    width: 70%; 
    margin: 0; 
    padding: 0; 
} 


#container #sidebarWrapper 
{  
    float: right; 

    height: auto; 
    min-height:100% 
    width: 29.7%; 
    margin: 0; 
    padding: 0; 
}