अतिप्रवाह: div और शरीर पर छिपा हुआ, अलग व्यवहार

इस एचटीएमएल को देखते हुए:अतिप्रवाह: div और शरीर पर छिपा हुआ, अलग व्यवहार

body { 
    height: 500px; 
    width: 500px; 
    overflow: hidden; 
} 

#a { 
    height: 100px; 
    width: 100px; 
} 

#b { 
    height: 100%; 
    width: 100%; 
}

<body> 
    <div id="a"></div> 
    <div id="b"></div> 
</body>

मैं #b चाहते अपने कंटेनर ब्लॉक के सभी शेष खड़ी जगह को भरने के, मैं इस के साथ शुरू हुआ

तो #b 100% ऊंचाई है, जिसका अर्थ है कि यह अपने मूल कंटेनर ब्लॉक की ऊंचाई ले रहा है, जो 500px है, समस्या यह है कि overflow: hidden; काम नहीं कर रहा है, #b क्लिप नहीं किया गया है।

दूसरी ओर, अगर मैं body रूप में एक ही गुण के साथ एक और div साथ #a और #b लपेट ऊपर मैं वांछित परिणाम है:

<body> 
<div id="wrap"> 
<div id="a"></div> 
<div id="b"></div> 
</div> 
</body>

#wrap { 
    height: 500px; 
    width: 500px; 
    overflow: hidden; 
} 

#a { 
    height: 100px; 
    width: 100px; 
} 

#b { 
    height: 100%; 
    width: 100%; 
}

निश्चित रूप से इस एचटीएमएल साथ

मेरा प्रश्न है कि div और body समान संपत्तियों के साथ अलग-अलग व्यवहार होने लगते हैं? और क्या रैपर के बिना एक ही प्रभाव प्राप्त करने का कोई तरीका है?

प्रश्न मैं दो jsFiddles बनाया है इसे समझने के लिए: http://jsfiddle.net/2QWn3/ ही गुणों के साथ

दो jsFiddles विभिन्न उपज: आवरण के रूप में div टैग के साथ http://jsfiddle.net/3AMtG/

jsFiddle: आवरण के रूप में

jsFiddle शरीर टैग के साथ परिणाम है। ऐसा क्यों है?

स्रोत

2013-03-17 Twissell

मैं आपके दो एक्सपल्स के बीच कोई अंतर नहीं देख सकता, और शायद यह बिंदु, मुझे लगता है कि एक बॉडी टैग में एक div टैग की तुलना में अधिक मूलभूत मूल्य होता है और प्रत्येक ब्राउज़र के पास अपना प्रस्तुत करने का तरीका होता है @Firefox 19.0.2 –

overflow संपत्ति में कुछ विशेष व्यवहार हैं जो HTML के html और body तत्वों के लिए विशिष्ट हैं, जिन्हें CSS2.1 spec में वर्णित किया गया है। सामान्य परिस्थितियों में पूरे पृष्ठ पर बदलती ओवरफ्लो सेटिंग्स को समायोजित करने के लिए ये विशेष मामले मौजूद हैं, इसलिए लेखकों को इसे html या body पर सेट करने की आवश्यकता है, लेकिन दोनों नहीं।

इस मामले में, जब आप overflow: hiddenbody पर लागू होते हैं, यह वास्तव में body के बजाय व्यूपोर्ट को प्रभावित करता है (- कोई स्क्रॉलबार पूर्वावलोकन फलक पर ही दिखाई देगा आप पूर्वावलोकन फलक का आकार बदलने यह कम करने के लिए से देख सकते हैं)। यह #b का कारण सामान्य रूप से शरीर को ओवरफ्लो करने के लिए करता है, भले ही आप इसे एक निश्चित ऊंचाई दें जो #a और #b के योग से कम है। दूसरे शब्दों में, ऐसा लगता है कि आप इसे पहले स्थान पर कभी भी सेट नहीं करते हैं।

आप visiblehtml पर के अलावा कुछ करने के लिए overflow सेट करते हैं, हालांकि, इस व्यूपोर्ट, html बजाय body को दिया जिससे body पर घोषणा छोड़ने अप्रभावित है और यह रूप में एक ही तरह से व्यवहार करने की इजाजत दी मान का उपयोग करने का कारण बनता है आवरण:

html { 
    overflow: auto; 
} 

body { 
    height: 500px; 
    width: 500px; 
    overflow: hidden; 
}

jsFiddle preview

स्रोत

2013-03-17 15:02:27 BoltClock

शरीर और div उनमें से पूरी तरह से अलग है। मेरे दैनिक काम में, मुझे इस तरह अपना कोड बनाना पसंद है।

<div class='xxx-ctn'> 
    <div class='xxx-inner'> 
    <div class='data-wrapper'> 
     [p|ul|ol|h1-h6|article|section]..... 
    </div> 
    </div> 
</div>

ठीक है, मुझे आपकी स्थापना याद आ रही है, लेकिन मुझे लगता है कि यह एक अच्छा कोडिंग खरगोश है।

स्रोत

2013-03-17 15:03:03

शरीर तत्व को मुख्य अभिभावक तत्व के रूप में माना जाता है जिसके अंदर ब्राउज़र विंडो के भीतर प्रदर्शित अन्य तत्व रहते हैं, इसलिए चौड़ाई और ऊंचाई संपत्ति उस पर लागू नहीं होती है। सर्वोत्तम प्रथाओं के मुताबिक # ड्रेपर जैसे डिवी कंटेनर को बेहतर बनाना बेहतर है जो आपने अपने दूसरे उदाहरण में किया था।

स्रोत

2013-03-17 15:44:05

अतिप्रवाह: div और शरीर पर छिपा हुआ, अलग व्यवहार

उत्तर

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