मार्जिन-टॉप: 100% पैरेंट चौड़ाई मान प्राप्त करता है ... अजीब

मेरे पास अधिकांश ब्राउज़रों (यानी, एफएफ, क्रोम, सफारी) पर बहुत अजीब "मुद्दा" है।मार्जिन-टॉप: 100% पैरेंट चौड़ाई मान प्राप्त करता है ... अजीब

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style type="text/css"> 
     html{ 
      outline: 1px #0ff solid; 
      background: rgba(0,255,255,0.1); 
     } 
     body{ 
      margin: 0; 
      padding: 0; 
      outline: 1px #00f solid; 
      background: rgba(0,0,255,0.1); 
     } 
     #aDiv{ 
      width: 300px; 
      outline: 1px #f00 solid; 
      background: rgba(255,0,0,0.2); 
     } 
     #bDiv{ 
      margin-top: 100%; 
      outline: 1px #0f0 solid; 
      background: rgba(0,255,0,0.1); 
     } 
    </style> 
</head> 
<body> 
    <div id="aDiv"> 
     <div id="bDiv"> 
      content 
     </div> 
    </div> 
</body> 
</html>

जब आप #aDiv चौड़ाई बदलने के लिए, तो #bDiv मार्जिन टॉप समान मूल्य वाली बदल जाएगा: यहाँ उदाहरण कोड है। मुझे नहीं पता कि यह कैसे संभव है, ऊंचाई चौड़ाई तक जाती है। वैसे भी आप में से एक मुझे समझा सकता है कि क्या हो रहा है?

सादर;)

डी

स्रोत

2011-10-05 Artnova Art

यह वास्तव में according to the spec

< प्रतिशत > प्रतिशत उत्पन्न बॉक्स के धारक ब्लॉक की चौड़ाई के संबंध में गणना की जाती है है। ध्यान दें कि यह 'मार्जिन-टॉप' और 'मार्जिन-तल' के लिए भी सच है। यदि युक्त ब्लॉक की चौड़ाई इस तत्व पर निर्भर करती है, तो परिणामस्वरूप लेआउट सीएसएस 2.1 में अपरिभाषित है।

सुंदर बेकार, है ना? क्या आपने position: absolute और bottom: 0 का उपयोग करने पर विचार किया है? वे जो भी आप खोज रहे हैं उससे अधिक हो सकते हैं।

स्रोत

2011-10-05 13:04:07

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

दुर्भाग्य से, यह मानक, लेकिन शुभकामनाएं का पालन करता है। –

किस प्रकार का मोरन मानक में डालता है .. यह है .. लगभग अविश्वसनीय बेवकूफ, क्षैतिज मूल्यों पर ऊर्ध्वाधर प्रतिशत आधार। – Noishe

#bDiv{ 
     margin-top: 100%; --> This need to change 
     outline: 1px #0f0 solid; 
     background: rgba(0,255,0,0.1); 
    }

इसकी नहीं एक अजीब मुद्दा। ऐसा इसलिए है क्योंकि आपने margin-top को 100% पर सेट किया है, क्योंकि aDivbDiv का अभिभावक है, यह aDiv की चौड़ाई margin-top के रूप में लेता है।

स्रोत

2011-10-05 13:03:26

यह मुझे स्पष्ट था कि इस समस्या को कैसे हटाया जाए, हालांकि मैं कारण के बारे में उत्सुक था, क्यों ऊर्ध्वाधर प्रतिशत क्षैतिज पैरेंट चौड़ाई से मूल्य प्राप्त करता है। यह कोई समझ नहीं आता ... –

यह सब bDiv पर अपने सीएसएस margin-top: 100%;

होने से कोई लेना देना तो आप इस निकालते हैं है, सब कुछ फिर से सामान्य कार्य करता है।

स्रोत

2011-10-05 13:06:52 Luke

यह मुझे स्पष्ट था कि इस समस्या को कैसे हटाया जाए, हालांकि मैं कारण के बारे में उत्सुक था, क्यों ऊर्ध्वाधर प्रतिशत क्षैतिज पैरेंट चौड़ाई से मूल्य प्राप्त करता है। इसका कोई मतलब नही बनता... –

कृपया कसुन के उत्तर – Luke

आप व्यूपोर्ट सापेक्ष इकाइयों (व्यूपोर्ट चौड़ाई के 1vw = 1%, व्यूपोर्ट ऊंचाई के 1vh = 1%) का प्रयास कर सकते हैं।

margin-top: 90vh; कोशिश की?

स्रोत

2015-01-21 21:47:08 cptstarling

धन्यवाद साथी का संदर्भ लें, मुझे इन मानों का अधिक उपयोग करना होगा! – domiSchenk

मार्जिन-टॉप: 100% पैरेंट चौड़ाई मान प्राप्त करता है ... अजीब

उत्तर

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