सीएसएस तरल लेआउट: कंटेनर चौड़ाई बढ़ने पर प्रतिशत के आधार पर मार्जिन-टॉप बढ़ता है

Question

मैं केवल सीएसएस तरल लेआउट & उत्तरदायी डिज़ाइन सीख रहा हूं, और मैं लेआउट में कोई पीएक्स मानों के साथ सभी प्रतिशत मानों का उपयोग करने की कोशिश कर रहा हूं।

अब तक ऐसा लगता है कि काम कर रहा है, लेकिन एक ही स्थान पर, मैं कुछ ऐसा देख रहा हूं जिसकी मुझे उम्मीद नहीं थी। मैं दो ऊर्ध्वाधर स्टैक्ड divs के बीच एक मार्जिन डालने की कोशिश कर रहा हूं जो कंटेनर की ऊंचाई के आधार पर परिवर्तन करता है। मैं अपेक्षा करता हूं कि जब मैं खिड़की को लंबवत रूप से आकार बदलूं तो मार्जिन बदल जाएगा, लेकिन यदि आप इसे क्षैतिज रूप से आकार बदलते हैं तो यह भी बढ़ता है, जो मैं नहीं चाहता हूं। मैं क्या खो रहा हूँ?

यहां एक पहेली है। आपकी सहायता के लिए अग्रिम धन्यवाद।

http://jsfiddle.net/gregir/aP5kz/

Answer 1

सीएसएस में, सभी चार मार्जिन: और पैडिंग: प्रतिशत चौड़ाई के सापेक्ष हैं ... भले ही यह गैरकानूनी प्रतीत हो। सीएसएस का नमूना यही तरीका है, इसके बारे में आप कुछ भी नहीं कर सकते हैं।

क्या आप इसके बजाय 'ex' (या 'em') के साथ क्या कर सकते हैं? मार्जिन/पैडिंग निर्दिष्ट के लिए मुझे "तरल पदार्थ" मान देखने के लिए उपयोग किया जाता है ... और यह प्रतिशत से कम समस्याग्रस्त हो सकता है। (हालांकि मेरे पास प्रासंगिक पहले हाथ का अनुभव नहीं है, लेकिन संदिग्ध आपके गणना किए गए प्रतिशत मानों पर बहुत लंबे समय तक सटीक सटीक ब्राउज़र ब्राउज़र असंगतता समस्याओं के लिए आपको स्थापित करने जा रहे हैं। मेरी शैली सीएसएस प्रतिशत को पूर्णांक में सीमित करना है सभी संभव, या कभी-कभी शायद एक या कभी-कभी दशमलव बिंदु के बाद भी दो अंक।)

यदि आप वास्तव में एक सटीक मनमाने ढंग से आकार की खाली ऊर्ध्वाधर जगह चाहते हैं जो कंटेनर का प्रतिशत है, तो पहली बात जो मेरे दिमाग में आती है एक अलग ऊंचाई < div> एक "ऊंचाई: एनएन%" सीएसएस विनिर्देश के साथ है। या शायद आप जो कुछ भी निर्दिष्ट कर रहे हैं वह पहले से ही ऊर्ध्वाधर आकारों को संभालने के लिए पहले से ही संभाला जा रहा है (क्योंकि ऐसा लगता है कि मार्जिन वास्तव में लंबवत आकार में कुछ भी नहीं कर रहे हैं)।

Answer 2

हाँ, यह अप्रत्याशित और जवाबी सहज ज्ञान युक्त है, लेकिन यह मुझे पता नहीं क्यों यह काम करता है के रूप में यह होता है है के लिए बनाया गया & के रूप में काम करता है। देखें margin-top percentage does not change when window height decreases