मैं एक वेबपृष्ठ (link text) पर काम कर रहा हूं, लेकिन मुझे Google क्रोम में ऊंचाई संपत्ति के साथ परेशानी हो रही है। यदि आप पृष्ठ देखते हैं, तो आप देखेंगे कि कोई पृष्ठभूमि रंग नहीं है। ऐसा इसलिए है क्योंकि #mainContent की 0px की ऊंचाई है। इंटरनेट एक्सप्लोरर में, यह मामला नहीं है। क्या किसी के पास विचार हैं?क्रोम में मेरे div टैग की ऊंचाई 0 के रूप में क्यों गणना की जा रही है?
ऐसा इसलिए है क्योंकि आंतरिक सामग्री को फ़्लोट किया जा रहा है। अभिभावक तत्व फ़्लोट किए गए बच्चों की ऊंचाई नहीं लेते हैं। #mainContent सीएसएस में overflow: hidden; जोड़ने का प्रयास करें।
डिफ़ॉल्ट
ऊंचाई को स्पष्ट रूप से परिभाषित करने का प्रयास करें: ऑटो;
#mainContent के अंदर सब कुछ तैर रहा है। फ़्लोट्स उनके कंटेनर का आकार बदल नहीं लेते हैं।
<div id="mainContent">
<!-- inner bars -->
<div style="clear:both;"></div>
</div>
मैं एक महसूस कर रही यह #mainContent की सामग्री के साथ कुछ करने के लिए किया जाएगा ठीक से कंटेनर बाहर धकेलने नहीं div है: सबसे आसान समाधान एक स्पष्ट ठीक पहले तो जैसे #mainContent के अंत जोड़ना है। आप इसे कई अलग-अलग तरीकों को ठीक करने में सक्षम होना चाहिए, जैसे क्लीयरिंग div का उपयोग करना।
निम्नलिखित सीएसएस जोड़ें:
.clearfix{
clear:both;
}
और maincontent div बंद करने से पहले clearfix वर्ग के साथ एक div जोड़ें:
<div id="mainContent">
<div id="rightSide">
...
</div>
<div id="content">
...
</div>
<div class="clearfix"/>
</div>
यह ब्राउज़र को याद दिलाना चाहिए फिट करने के लिए खुला mainContent div मजबूर करने के लिए इसकी सामग्री
हाहा, यह उत्तर देने के लिए आपके लिए एक कठिन सवाल होगा क्योंकि फ्लोट को साफ़ करने के कई तरीके हैं। (आप फ्लोटिंग #mainContent भी कोशिश कर सकते हैं)
यहां अद्भुत quirksmode article है।
यह एक "हैकी" समाधान है (मुझे यकीन है कि और अधिक "अर्थपूर्ण" तरीके हैं), लेकिन यह सबसे आसान और सबसे अधिक इस्तेमाल किया जाने वाला है। +1 –
बिल्कुल सही। मैंने अव्यवस्था के कारण ऐसा कभी नहीं किया है लेकिन यह मृत-आसान और अच्छी तरह से समर्थित है। – anq
यह भी काम करता है, लेकिन ओवरफ्लो जोड़ना: सीएसएस से छिपा हुआ मतलब है कि मुझे प्रत्येक पृष्ठ को अलग-अलग संशोधित करने की आवश्यकता नहीं थी। जो मुझे थोड़ा बेहतर पसंद आया। – Quentamia