सीएसएस के साथ बिल्कुल तैनात तत्वों को साफ़ करें? - एचटीएमएल, सीएसएस, सीएसएस-स्थिति, स्पष्ट

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

<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>

उत्तर:

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

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

शर्तों की अनुमति देते समय तत्वों को कंटेनर में स्थानांतरित करने के लिए पूर्ण-स्थिति का उपयोग करें।

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

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

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

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

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