सीएसएस के साथ पूरी तरह से तैनात तत्वों को साफ़ करें?

Question

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

<header style="position: relative;"></header> 

<div id="content" style="position: relative;"> 

    <section id="a" style="position: absolute;"></section> 

    <section id="b" style="position: absolute;"></section> 

    <section id="c" style="position: absolute;"></section> 

    <section id="d" style="position: absolute;"></section> 

    <section id="e" style="position: absolute;"></section> 

</div> 

<footer style="position: relative;"></footer> 

Answer 1

बिल्कुल-तैनात तत्वों लेआउट का भाग नहीं हैं - माता पिता आइटम पता नहीं कितना बड़ा बिल्कुल-तैनात बच्चे तत्व हैं की है। यह सुनिश्चित करने के लिए कि आप पाद लेख को ओवरलैप नहीं करते हैं, आपको "सामग्री" की ऊंचाई निर्धारित करने की आवश्यकता है।

Answer 2

लेआउट के लिए पूरी तरह से-तैनात तत्वों का उपयोग के बाद से है कि तत्वों सामान्य प्रवाह से निकाल दिए जाते हैं और अब उनके आसपास तत्वों को प्रभावित न करें। और वे अन्य तत्वों से प्रभावित नहीं हैं।

उपयोग पूर्ण स्थिति एक कंटेनर के भीतर तत्वों को स्थानांतरित करने के लिए जब स्थिति की अनुमति है।

फ़्लोट किए गए तत्वों के लिए मैं आपको स्पष्ट फ़िक्सिंग तकनीक नामक एक विशिष्ट समाशोधन तकनीक का उपयोग करने का सुझाव देता हूं। मैं इसे धार्मिक रूप से उपयोग करता हूं।

http://nicolasgallagher.com/micro-clearfix-hack/

http://jsfiddle.net/necolas/K538S/

Answer 3

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

.gallery3D-item { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.gallery3D-item:first-of-type { 
 
    position: relative; 
 
    display: inline-block; 
 
}

: परिवर्तन, इस मामले में नोटिस सभी तत्वों को एक ही ऊंचाई है