एचटीएमएल 5 टैग बनाम ऑटो आकार बदलने के लिए

Question

मैं एक समाधान की उम्मीद कर रहा हूं, लेकिन सबसे खराब स्थिति परिदृश्य, मेरा div क्यों आकार बदल रहा है, इसका एक स्पष्टीकरण, और ऐसा इसलिए हो सकता है क्योंकि मैं एक नौसेना टैग का उपयोग कर रहा हूं।

मेरे पास निम्न HTML है। जब मेरे 'सेक्शन' टैग में सामग्री बढ़ती है, तो पृष्ठ-सामग्री के वर्ग के साथ div भी होता है। हालांकि, जब मेरे एनवी मेनू आइटम बढ़ते हैं, तो div का आकार बदलता नहीं है।

<div class="page-content"> 
    <nav> 
     <ul>{menu items here}</ul> 
    </nav> 
    <section id="main"> 
     {bunch of text here} 
    </section> 
</div> 

यहां मेरा सीएसएस है।

.page-content 
{ 
    display: block; 
    position:relative; 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    background-image: url(images/bg-home-main.jpg); 
    background-repeat: no-repeat; 
    background-position: center; 

} 

    nav { 
    display: block; 
    float: left; 
    padding: 15px; 
    position: relative; 
    margin: 0px 0px 0px -45px; 
} 

#main { 
    padding: 5px 25px 5px 25px; 
    margin-left: 175px; 
} 

समस्या मैं तो है div एक पृष्ठभूमि छवि है कि दोनों एनएवी और अनुभाग क्षेत्रों की पृष्ठभूमि को शामिल करना चाहिए होता है। हालांकि, यह केवल तभी होता है जब मेरा सेक्शन क्षेत्र मेरी नौसेना की तुलना में बड़ा (ऊपर से नीचे) हो, क्योंकि विभाजन अनुभाग आकार को समायोजित करने के लिए खींच जाएगा। हालांकि, अगर मेरा एनवी क्षेत्र बड़ा है, तो यह वास्तव में छवि के लिए div और वहां के बाहर फैलता है।

Answer 1

जब आप कोई तत्व फ़्लोट करते हैं, तो आप इसे प्रवाह से बाहर ले जाते हैं, और यह इसके तत्व का विस्तार नहीं करेगा। इसका एक कामकाज अतिप्रवाह जोड़ने के लिए है: छुपा; युक्त तत्व के लिए।

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