प्रोग्रामिंग, सवालों के जवाब में मदद करें / एचटीएमएल / पूर्ण-स्थानित div की ऊंचाई को अनदेखा किया जाता है - एचटीएमएल, सीएसएस, सीएसएस-स्थिति

पूर्ण-स्थानित div की ऊंचाई को अनदेखा किया जाता है - एचटीएमएल, सीएसएस, सीएसएस-स्थिति

मेरे पास यह सरल HTML संरचना है:

<div id="mainbody">
<div id="main">
...
</div>
<div id="left">
...
</div>
</div>
<div id="footer">
...
</div>

Div "mainbody" की स्थिति है: रिश्तेदार। Div "left" पृष्ठ के बाईं ओर और गतिशील ऊंचाई पर पूर्ण स्थिति है। Div "मुख्य" div "बाएं" के दाईं ओर बाईं ओर तैरता है।

सीएसएस:

#mainbody {
position:relative;
}
#left {
position:absolute;
width:250px;
}
#main {
float: left;
margin-left: 260px;
width:80%;
}

समस्या: div "left" की ऊंचाई को अनदेखा किया जाता है और div "footer" शुरू होता है जहां div "main" समाप्त होता है, भले ही div "left" div "main" से बड़ी ऊंचाई हो।

उत्तर:

जवाब के लिए 3 № 1

आप जो खोज रहे हैं वह एक है clearfix ताकि आपके तत्व ठीक से लोड हो जाएंगे। देख लिंक एसओ सवाल "कौन सा तरीका" clearfix "सबसे अच्छा है?" कई संभावित clearfixes के लिए।

कारण क्यों है footer तत्व स्वयं के बगल में स्थित है main तत्व इसलिए है क्योंकि पूरी तरह से स्थित तत्वपेज प्रवाह से हटा दिए जाते हैं। नतीजतन, बाद के तत्व पूरी तरह से तैनात तत्व का इलाज करते हैं जैसे कि यह पहले स्थान पर नहीं था। एक स्पष्टफिक्स के साथ, यह समस्या हल हो गई है।

जवाब के लिए 2 № 2

यदि आप निम्नलिखित तत्वों को प्रभावित नहीं करना चाहते हैं तो आपको फ़्लोट किए गए तत्वों के बाद एक स्पष्ट जोड़ना होगा।

इसे दो तरीकों से हासिल किया जा सकता है: