अंदर तैरते हुए ऊँचाई में एक div कैसे विकसित करें

Question

जब मैं इसके अंदर तैरता हूं तो मैं अपनी ऊंचाई कैसे बढ़ा सकता हूं? मुझे पता है कि चौड़ाई के लिए एक मूल्य को परिभाषित करना और छिपे हुए कार्यों के लिए अतिप्रवाह स्थापित करना। समस्या यह है कि मुझे दिखाई देने वाले अतिप्रवाह के साथ एक div की आवश्यकता है। कोई विचार?

Answer 1

overflow:auto;युक्त div पर इसके अंदर सब कुछ (यहां तक ​​कि फ्लोटेड आइटम) दिखाई देता है और बाहरी div उनके चारों ओर पूरी तरह से लपेटता है। इस उदाहरण को देखें:

.wrap {
  padding: 1em;
  overflow: auto;
  background: silver;
 }
 
.float {
  float: left;
  width: 40%;
  background: white;
  margin: 0 1%;
}

<div class="wrap">
  <div class="float">Cras mattis iudicium purus sit amet fermentum. At nos hinc posthac, sitientis piros Afros. Qui ipsorum lingua Celtae, nostra Galli appellantur. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ambitioni dedisse scripsisse iudicaretur.</div>
  <div class="float">Mercedem aut nummos unde unde extricat, amaras. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod. Paullum deliquit, ponderibus modulisque suis ratio utitur.</div>
  </div>

Comments

हाँ, यह थोड़े काम करता है, लेकिन इसमें स्क्रॉल बार बनाने का खतरा है .. सही है?

— पडोजरथ

नहीं, ऐसा नहीं है कि मुझे @pedro का पता है। बाहरी div को सिर्फ आंतरिक divs को लपेटने के लिए विस्तार करना चाहिए। इसे फिडेल में आज़माएं, आंतरिक विभाजनों के आयामों को बढ़ाएं और देखें कि क्या होता है।

— जेकपैरिस

मैंने यह कोशिश की और ब्राउज़र विंडो के दाईं ओर लगभग 2em लंबा एक छोटा सा स्क्रॉल बार दिखाई दिया।

— निगेल एल्डर्टन

@ निगेल एल्डर्टन मेरे लिए ऐसा हो रहा था क्योंकि मैं कंटेनर की ऊंचाई (जहां overflowजोड़ा गया था) को मजबूर कर रहा था । इसे overflow: auto;क्लास से हटाने के साथ-साथ heightसेलेक्टर

— एग्गी ऑक्ट

Answer 2

फ्लोट्स को साफ़ करने का एक से अधिक तरीका है। आप कुछ यहाँ देख सकते हैं:
http://work.arounds.org/issue/3/clearing-floats/

जैसे, clear:bothआप के लिए काम कर सकते हैं

#element:after {
    content:"";
    clear:both;
    display:block;
}

#element { zoom:1; }

Comments

इस दृष्टिकोण का लाभ यह है कि overflow: auto;तत्व के बाहर सामग्री (जैसे फ़ोकस डेकोरेशन) को ओवरफ़्लो किया जाएगा, लेकिन ऐसा नहीं होगा।

— दान

अतिप्रवाह: ऑटो ने मेरे लिए एक क्षैतिज स्क्रॉलबार बनाया, इसलिए मैं इसका उपयोग नहीं कर सका। यह पूरी तरह से काम किया।

— एडविन स्टेलर

ठीक वही जो मेरे द्वारा खोजा जा रहा था। इस CSS को अभिभावक के लिए लागू किया। यह माता-पिता <div> की ऊंचाई का विस्तार करता है, ताकि तैरने वाला तत्व उसके भीतर बना रहे। सुरुचिपूर्ण, क्योंकि यह स्पष्ट रूप से बताता है कि: "माता-पिता के तल को फ्लोट को साफ करना चाहिए।"

— IAM_AL_X

Answer 3

कई मामलों में, overflow: auto;पर्याप्त होगा, लेकिन पूर्णता और क्रॉस ब्राउज़र समर्थन के लिए, Clearfix पर एक नज़र डालें जो सभी ब्राउज़रों के लिए काम करेगा।

निम्नलिखित मार्कअप पर विचार करें ..

<div class="clearfix">
   <div class="content">Content 1</div>
   <div class="content">Content 2</div>
</div>

निम्नलिखित शैलियों के साथ ..

.content { float:left; }

.clearfix { ..from link.. }

क्लीयरफिक्स के बिना, माता-पिता के divपास तैरते बच्चों के कारण ऊंचाई नहीं होगी। स्पष्ट उपसर्ग माता-पिता को तैरते बच्चों पर विचार करने देगा।

Comments

क्लियरफिक्स अतिरिक्त मार्कअप है। सीधे शब्दों में माता-पिता को मार्कअप देंoverflow: auto;

— JakeParis

Answer 4

मुझे लगा कि इसे करने का एक शानदार तरीका display: tableडिव पर सेट हो रहा है ।