अपनी सामग्री के साथ div की ऊंचाई का विस्तार करें

376

मेरे पास ये नेस्टेड डिव हैं और मुझे DIV को अंदर समायोजित करने के लिए (ऊंचाई में) विस्तार करने के लिए मुख्य कंटेनर की आवश्यकता है

    <!-- head -->
    ...
    <!-- /head -->

    <body class="main">
      <div id="container">
        <div id="header">
          <!--series of divs in here, graphic banner etc. -->
        </div>

    <div id="main_content"> <!-- this DIV _should_ stretch to accommodate inner divs -->
      <div id="items_list" class="items_list ui-sortable">
        <div id="item_35" class="item_details">
        </div>
        <div id="item_36" class="item_details">
        </div>        
        <div id="item_37" class="item_details">
        </div>
        <!-- this list of DIVs "item_xx" goes on for a while
             each one representing a photo with name, caption etcetc -->
      </div>
    </div>
    <br class="clear"/>

    <div id="footer">
    </div>
  </body>
</html>

सीएसएस यह है:

* {
    padding: 0;
    margin: 0;
}

.main {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #4c5462;
    margin: 0; 
    padding: 0;
    text-align: center; 
    color: #000000;
}
.main #container {
    height: auto;
    width: 46em;
    background: #4c5462;
    margin: 0 auto; 
    border: 0px solid #000000;
    text-align: left;       
}

.main #main_content {
    padding: 5px;
    margin: 0px;
}
#items_list {
    width: 400px;
    float: left;
}

.items_list {
    width: 400px;
    float: left;
}
.item_details {
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 3px;
    float: left;
    border-bottom: 0.5px solid blue;
}

मेरे पास समस्या यह है कि #main_contentसभी आंतरिक विभाजनों को समायोजित करने के लिए खिंचाव नहीं करता है, जिसके परिणामस्वरूप वे पृष्ठभूमि के खिलाफ जा रहे हैं।

उपरोक्त परिदृश्य को देखते हुए मैं इस समस्या को कैसे हल कर सकता हूं?

css height

— पैट्रिक
स्रोत

5

दोस्तों जवाब के लिए आप सभी का धन्यवाद! मेरे विशिष्ट मामले के लिए सबसे अच्छा समाधान दोनों पक्षों को साफ़ करने के लिए बीआर को हार्ड-कोड करना था (धन्यवाद जेनीफ़ॉफ़नी और राइसबोनल भी) वैसे भी, अन्य समाधानों ने भी काम किया है: ओवरफ़्लो डालना: ऑटो ठीक था, और अस्थायी #main_content भी ठीक था (हालांकि ir उस div की चौड़ाई को बाल divs के आकार में घटा दिया)। अब एक नौसिखिया होने के नाते मैं सोच रहा हूं: क्या इन समाधानों में कमियां हैं, या मैं उन्हें उदासीनता से उपयोग कर सकता हूं? (उदाहरण। शायद उनमें से एक IE6, या इसी तरह के साथ काम नहीं करता है ...)

— patrick

1

@ पैट्रिक, यदि आप अपने प्रश्न को और विकसित करना चाहते हैं, तो 'संपादन' लिंक (प्रश्न के वर्तमान पाठ के नीचे) पर क्लिक करें और आगे के प्रश्नों में जोड़ें। कन्वेंशन कुछ का उपयोग करने का सुझाव देता है जैसे कि <strong>Edited</strong>$Reason_for_revising_question...आप परिवर्तन को प्रतिबिंबित करने के लिए प्रश्न शीर्षक को बदलने की आवश्यकता कर सकते हैं यदि इसके फोकस में कोई बड़ा बदलाव या इसके अतिरिक्त है। =)

— डेविड का कहना है कि मोनिका

4

आपने कभी भी divटैग को बंद नहीं किया है id='container'। जिसके कारण कुछ समस्या हो सकती है।

— बटकिंस

@patrick, आपके पास .clearक्लास के लिए CSS भी नहीं है । क्या आप इसे भूल गए, या यह आपके मूल कोड में है? .clearउस पर वर्ग brबहुत महत्वपूर्ण है क्योंकि @jennyfofenny उनके जवाब में उल्लेख है।

— २३

280

डिव बंद clear:bothहोने से पहले आपको मजबूर होना #main_contentपड़ता है। मैं शायद div <br class="clear" />;में #main_contentजाऊँगा और CSS सेट करूँगा :

.clear { clear: both; }

अपडेट: इस प्रश्न को अभी भी पर्याप्त मात्रा में ट्रैफ़िक मिलता है, इसलिए मैं CSS3 में एक नए लेआउट मोड का उपयोग करके एक आधुनिक विकल्प के साथ उत्तर को अपडेट करना चाहता था जिसे फ्लेक्सिबल बॉक्स या फ्लेक्सबॉक्स कहा जाता है :

body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #3F51B5;
  color: #fff;
}

section.content {
  flex: 1;
}

footer {
  background-color: #FFC107;
  color: #333;
}

<div class="flex-container">
  <header>
    <h1>
     Header   
    </h1>
  </header>

  <section class="content">
    Content
  </section>

  <footer>
    <h4>
      Footer
    </h4>
  </footer>
</div>

स्निपेट का विस्तार करें

अधिकांश आधुनिक ब्राउज़र वर्तमान में फ्लेक्सबॉक्स और व्यूपोर्ट इकाइयों का समर्थन करते हैं , लेकिन यदि आपको पुराने ब्राउज़र के लिए समर्थन बनाए रखना है, तो विशिष्ट ब्राउज़र संस्करण के लिए संगतता की जांच करना सुनिश्चित करें।

— jennyfofenny
स्रोत

4

यहाँ सीएसएस स्पष्ट संपत्ति पर w3schools लेख है। मूल रूप से, स्पष्ट का मतलब है कि स्पष्ट तत्व को उसके प्रवाह में तैरने के नीचे शुरू करने के लिए लागू किया जाता है (या तो केवल बाएं, केवल दाएं या दोनों)।

— जेनीफॉफेनी

230

इसे इस्तेमाल करे: overflow: auto;

यह मेरी समस्या के लिए काम किया ..

— sip scz péter
स्रोत

10

+1, यह समाधान सुरुचिपूर्ण है और आपके पृष्ठ पर एक अदृश्य टैग नहीं जोड़ता है। इस

— फिडेल को

5

ओवरफ्लो ऑटो ने मेरे लिए अच्छा काम किया। FYI करें तो यह एक स्क्रॉल बार जोड़ देगा यदि ओवरफ्लो ऑटो कंटेनर की ऊंचाई अंदर की सामग्री से कम है। इसे भी आकार दें या ऊँचाई सेट करें: अतिप्रवाह के साथ ऑटो।

— ब्रायन मायर्स

@ Roozbeh15 display: block;इसके साथ जोड़ें

— BadAtPHP

2

सबसे अच्छा और आसान उपाय ... आपने मेरा दिन बचाया। धन्यवाद

— कश्यप कोटक

पवित्र शेट यह आश्चर्यजनक रूप से काम किया। किसी को भी इस काम के नीचे के तंत्र की व्याख्या करने की परवाह क्यों है?

— मेरकियल

86

निम्नलिखित जोड़ें:

overflow:hidden;
height:1%;

अपने मुख्य विभाग के लिए। स्पष्ट के लिए अतिरिक्त की आवश्यकता को समाप्त करता है <br />।

— छेद
स्रोत

वाह! मैंने जो अपेक्षा की थी, उसके ठीक विपरीत किया था! अतिप्रवाह: छिपी = फिट सामग्री का विस्तार! मुझे लगता है कि कभी नहीं होगा!

— mulllhausen

हां, यह मेरे लिए भी काम आया और यह पूरी तरह से समझ में नहीं आता कि क्यों। किसी भी स्पष्टीकरण क्यों 'ऊंचाई 1%' और 'अतिप्रवाह छिपा हुआ' काम?

— एक्रेलॉन

1

वास्तव में यह कैसे होता है और यहां तक कि यह क्यों काम करता है, अगर कोई ऊंचाई निर्धारित नहीं है, तो अतिप्रवाह छिपा हुआ क्यों न केवल सब कुछ छिपाता है (cos ऊँचाई 0 है), लेकिन खुद का विस्तार करें, क्या कोई स्पष्टीकरण है या बस विश्वास है और खुश रहें?

— मैक्स यारी

1

ओवरफ्लो: छिपा हुआ स्क्रॉल स्क्रॉल करता है, लेकिन ब्लॉक का आकार रखता है

— प्रामाणिक

मेरे लिए सिर्फ 'अतिप्रवाह: छिपा हुआ' लेकिन 'अतिप्रवाह: ऑटो' के साथ भी काम किया और स्क्रॉलबार नहीं दिखाया।

— बवंडर

60

एक वैकल्पिक तरीके के रूप में आप यह भी कोशिश कर सकते हैं कि कुछ स्थितियों में उपयोगी हो सकता है

display:table;

jsFiddle

— h0mayun
स्रोत

24

मैं सिर्फ उपयोग करूंगा

height: auto;

आपके div में। हां, मुझे पता है कि मुझे थोड़ी देर हो गई है लेकिन मुझे लगा कि यह किसी की मदद कर सकता है जैसे कि अगर यह यहां होता तो मेरी मदद करता।

— चार्ल्स
स्रोत

height: auto;नीचे दिए गए सभी आइटम शीर्ष पर जाने का कारण बनता है। मेरी मुख्य सामग्री div पर इस संपत्ति के साथ, मेरे पृष्ठ का पाद ऊपर की ओर बढ़ता है ताकि यह शीर्ष लेख को स्पर्श करे और मेरी सामग्री div को ओवरलैप करे।

— एरॉन फ्रेंके

1

मेरे लिए यही समाधान था। धन्यवाद!

— निक हैमर-एलिस

14

निम्नलिखित काम करना चाहिए:

.main #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some explorer browsers to trigger hasLayout
}

— Steerpike
स्रोत

ओवरफ्लो जोड़ना: ऑटो ने काम किया, हालांकि अगर मैं चौड़ाई भी जोड़ता हूं: 100%, जो div (#main_content) का कारण बनता है, यह माता-पिता की तुलना में थोड़ा बड़ा है। क्यों नहीं मिला!

— पैट्रिक

2

ऐसा इसलिए है क्योंकि पैडिंग निर्दिष्ट चौड़ाई के अलावा मायने रखता है, इसलिए आपके तत्व की चौड़ाई 100% + 5px बाईं गद्दी +

— पीएक्स

1

अतिप्रवाह: ऑटो; मेरे लिए काम किया, बहुत बहुत धन्यवाद।

— कॉस्को टेक

9

बहुत ही सरल तरीका है

मूल DIV पर:

height: 100%;

मेरे लिए यह काम हर बार होता है

— डैनियल बेल्ट्रामी
स्रोत

8

display:inline-blockइसमें संलग्न css के साथ स्पैन टैग का उपयोग करें । फिर आप CSS का उपयोग कर सकते हैं और इसे बहुत सारे तरीकों से div की तरह जोड़-तोड़ कर सकते हैं लेकिन यदि आप इसमें शामिल नहीं हैं widthया heightइसकी सामग्री के आधार पर इसका विस्तार और वापस लेना है।

उम्मीद है की वो मदद करदे।

— डार्क मार्च
स्रोत

आपकी उम्मीद काम कर गई: इसने कम से कम मेरी मदद की! :) Btw, मैंने एक div(के बजाय span) के रूप में अपने तत्व को छोड़ दिया लेकिन display: inline-blockअभी भी मेरे मामले (क्रोमियम) में काम किया है।

— Snapfractalpop

6

आमतौर पर मुझे लगता है कि यह clear:bothअंतिम बाल-तत्व पर एक नियम को मजबूर करके हल किया जा सकता है #items_list।

आप या तो उपयोग कर सकते हैं:

#items_list:last-child {clear: both;}

या, यदि आप एक गतिशील भाषा का उपयोग कर रहे हैं, तो जो भी लूप उत्पन्न होता है उसमें अंतिम तत्व के लिए एक अतिरिक्त वर्ग जोड़कर सूची स्वयं बनाई जाती है, इसलिए आप अपने html में कुछ के साथ समाप्त होते हैं:

<div id="list_item_20" class="last_list_item">

और सीएसएस

.last_list_item {clear: both; }

— डेविड कहते हैं कि मोनिका को बहाल करें
स्रोत

6

यह समस्या तब आती है जब किसी पैरेंट डिव के बाल तत्व फ्लोट किए जाते हैं। यहाँ समस्या का नवीनतम समाधान है:

अपनी CSS फ़ाइल में निम्न श्रेणी को .clearfix के साथ छद्म चयनकर्ता लिखें : के बाद

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

फिर, अपने HTML में, .clearfix class को अपने पैरेंट डिव में जोड़ें। उदाहरण के लिए:

<div class="clearfix">
    <div></div>
    <div></div>
</div>

यह हमेशा काम करना चाहिए। आप के रूप में वर्ग के नाम पर कॉल कर सकते .group के बजाय .clearfix , के रूप में यह कोड अधिक अर्थ कर देगा। ध्यान दें, दोहरे उद्धरण "" के बीच सामग्री के मूल्य में डॉट या यहां तक कि एक स्थान जोड़ना आवश्यक नहीं है । इसके अलावा, अतिप्रवाह: ऑटो; समस्या को हल कर सकता है, लेकिन यह अन्य समस्याओं का कारण बनता है जैसे कि स्क्रॉल-बार दिखाना और अनुशंसित नहीं है।

स्रोत: लिसा कैटालानो और क्रिस कॉयर का ब्लॉग

— इफ्ती महमूद
स्रोत

5

#main_contentdiv में एक फ्लोट प्रॉपर्टी जोड़ें - यह तब अपनी फ़्लोट की गई सामग्री को शामिल करने के लिए विस्तारित होगी

— रे
स्रोत

धन्यवाद रे, इसने काम किया, हालांकि यह डिव को सिकुड़ कर उसके आकार (#items_list) के बराबर हो गया, जिसकी चौड़ाई है: 400px; आपका समाधान वास्तव में अच्छा होगा अगर मैं #main_content को अपनी पूरी चौड़ाई में बना सकूं - कोई सुझाव?

— पैट्रिक

@ 2 साल और थोड़ा साल बाद और इसने मुझे एक समान समस्या के साथ संभावित सिरदर्द से बचाया। धन्यवाद!

— जॉन एच।

4

कुछ भी करने से पहले css नियमों की जाँच करें:

{ position:absolute }

निकालें यदि मौजूद हैं और उनकी आवश्यकता नहीं है।

— onalbi
स्रोत

2

क्योंकि "निरपेक्ष तैनात तत्व प्रवाह से हटा दिए जाते हैं, इस प्रकार अन्य तत्वों द्वारा अनदेखा किया जाता है। इसलिए आप एक पूर्ण तत्व के अनुसार माता-पिता की ऊंचाई निर्धारित नहीं कर सकते हैं।" stackoverflow.com/questions/12070759/…

— फेडेरिको

4

फ़्लोट किए गए तत्व मूल तत्व के अंदर की जगह पर कब्जा नहीं करते हैं, जैसा कि नाम से पता चलता है कि वे तैरते हैं! इस प्रकार यदि एक ऊँचाई स्पष्ट रूप से एक तत्व प्रदान नहीं की जाती है जिसमें उसके बाल तत्व तैरते हैं, तो मूल तत्व सिकुड़ता हुआ दिखाई देगा और बाल तत्व के आयामों को स्वीकार नहीं करता है, भले ही वह दिया गया होoverflow:hidden; भले बच्चे स्क्रीन पर दिखाई न दें। इस समस्या से निपटने के कई तरीके हैं:

साथ जारी तत्व नीचे एक और तत्व सम्मिलित clear:both;संपत्ति, या उपयोग clear:both;पर :afterजारी तत्व की।
के बजाय का उपयोग करें display:inline-block;या ।flex-boxfloat

— अपूर्व श्रीवास्तव
स्रोत

3

इस तरह दिखता है काम करता है

html {
 width:100%;
 height:auto;
 min-height:100%
}

यह स्क्रीन का आकार न्यूनतम लेता है, और यदि सामग्री का विस्तार होता है तो यह बढ़ता है।

— SubstanceMX
स्रोत

2

सीएसएस में: #clear_div{clear:both;}

इनर डिव के div टैग के बाद इस नए निम्नलिखित div को जोड़ें

<div id="clear_div"></div>

http://www.w3schools.com/cssref/pr_class_clear.asp : अधिक जानकारी के लिए

— इंग्रिड
स्रोत

2

मैंने बूटस्ट्रैप को उन प्रोजेक्ट्स के साथ जोड़ा, sectionजो मैंने 100% स्क्रीन ऊंचाई पर सेट किए थे। यह तब तक अच्छी तरह से काम करता है जब तक कि मैंने इस परियोजना को उत्तरदायी नहीं बना दिया, जिस बिंदु पर मैंने जेनीफॉन्नी के उत्तर का हिस्सा उधार लिया इसलिए मेरे अनुभाग की पृष्ठभूमि सामग्री की पृष्ठभूमि से मेल खाती थी जब स्क्रीन का आकार छोटे स्क्रीन पर बदल गया।

मेरा नया sectionCSS इस तरह दिखता है:

section {
    // min-height so it looks good on big screen
    // but resizes on a small-screen
    min-height: 100%;
    min-height: 100vh;
    width:100%;
    width:100vh;
}

मान लीजिए कि आपको एक अनुभाग मिला है जो एक निश्चित रंग है। उपयोग करने से min-height, यदि छोटी स्क्रीन के कारण अनुभाग की चौड़ाई सिकुड़ जाती है, तो अनुभाग की ऊंचाई का विस्तार होगा, सामग्री अनुभाग के भीतर रहेगी, और आपकी पृष्ठभूमि वांछित रंग रहेगी।

— एड्रियन
स्रोत

2

क्या आपने पारंपरिक तरीके से कोशिश की है? मुख्य कंटेनर ऊंचाई दे: ऑटो

#container{height:auto}

मैंने इसका इस्तेमाल किया है और इसने मेरे साथ ज्यादातर समय काम किया है।

— मिशेल डिमवाइट
स्रोत

1

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

जाहिरा तौर पर यह सिर्फ यह देखने के लिए आवश्यक है कि इसमें समाहित करने के लिए तालिका के नीचे कुछ सामग्री है। मुझे आश्चर्य है कि अगर यह किसी और के लिए काम करेगा।

यह इस तरह की चीज है जो डिजाइनरों को टेबल-आधारित लेआउट का सहारा बनाती है - मैंने जितना समय इस सामान को लगाने में लगाया है और इसे क्रॉस-ब्राउज़र संगत बना रहा है वह मुझे पागल बना रहा है।

— नैन्सी हेस्टिंग्स-क्रू
स्रोत

सीएसएस के साथ ऐसा करने का कोई तरीका होना चाहिए, लेकिन मुझे नहीं पता कि यह क्या होगा। इसने मेरे लिए काम किया, लेकिन मुझे चौड़ाई जोड़ना था: 100%; ऊंचाई: ऑटो; मिनट-height: 100%; स्थिति: रिश्तेदार;

— RationalRabbit

1

मैंने यह कोशिश की और यह काम कर गया

<div style=" position: absolute; direction: ltr;height:auto; min-height:100%">   </div>

— अहमद अबोलेला
स्रोत

0

यदि आप jQuery यूआई का उपयोग कर रहे हैं, तो उनके पास पहले से ही एक वर्ग है, जो काम करता है, बस एक आकर्षण है <div>, जो उस डिव के नीचे तल पर जोड़ते हैं , जिसके साथ आप विस्तार करना चाहते height:auto; हैं, एक वर्ग का नाम ui-helper-clearfix जोड़ें या इस शैली विशेषता का उपयोग करें और नीचे की तरह जोड़ें :

<div style=" clear:both; overflow:hidden; height:1%; "></div>

स्पष्ट div में jQuery के यूआई वर्ग को जोड़ें, न कि जिस div को आप विस्तारित करना चाहते हैं।

— लुकास एम। ओलिवेरा
स्रोत

0

मुझे पता है कि यह पुराने धागे की तरह है, हालांकि, इसे min-heightसीएसएस संपत्ति के साथ एक साफ तरीके से प्राप्त किया जा सकता है , इसलिए मैं इसे भविष्य के संदर्भों के लिए यहां छोड़ दूंगा:

मैंने यहाँ ओपी पोस्ट कोड के आधार पर एक फिडेल बनाया: http://jsfiddle.net/U5x4T/1/ , जैसे ही आप हटाते हैं और डिव को अंदर जोड़ते हैं, आप देखेंगे कि कंटेनर कैसे फैलता है या आकार में कमी करता है

केवल 2 चीजें जो आपको इसे प्राप्त करने की आवश्यकता है, ओपी कोड के लिए अतिरिक्त है:

* मुख्य कंटेनर में ओवरफ्लो (फ्लोटिंग डिव के लिए आवश्यक)

* न्यूनतम ऊंचाई सीएसएस संपत्ति, अधिक जानकारी यहाँ उपलब्ध है: http://www.w3schools.com/cssref/pr_dim_min-height.asp

— जुआन कार्लोस अल्पीज़र चिनचिला
स्रोत

0

जोड़ा गया प्रदर्शन: इनलाइन इन दिव और यह बढ़ गया ऑटो (स्क्रॉल सामान नहीं) जब ऊंचाई सामग्री बड़ी हो गई तो सेट की ऊंचाई 200px

— Jelle
स्रोत

1

यह प्रश्न का स्पष्ट उत्तर नहीं है। टिप्पणी के लिए, कृपया टिप्पणी समारोह का उपयोग करें।

— ksbg

0

आप सीएसएस ग्रिड लेआउट का उपयोग कर सकते हैं । समर्थन इस समय व्यापक है: इसे कैनिएस पर जांचें ।

यहाँ jsfiddle पर उदाहरण है। पाठ सामग्री के टन के साथ भी उदाहरण ।

HTML कोड:

<div class="container">
  <div class="header">
   Header
  </div>
  <div class="content">
   Content
  </div>
  <div class="footer">
   Footer
  </div>
</div>

सीएसएस कोड:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-rows: 100px auto 150px;
  grid-template-columns: auto;
}
// style stuff

— शारिकोव व्लादिस्लाव
स्रोत

0

मैंने ऊपर सूचीबद्ध प्रत्येक सुझाव की बहुत कोशिश की और उनमें से कोई भी काम नहीं किया। हालांकि, "प्रदर्शन: टेबल" ने मेरे लिए चाल चली।

— PongGod
स्रोत

-1

बहुत सीएसएस का उपयोग करने की आवश्यकता नहीं है, बस बूटस्ट्रैप का उपयोग करें, फिर उपयोग करें:

class="container"

उस तलाक के लिए जिसे भरने की जरूरत है।

आप यहां से बूटस्ट्रैप प्राप्त कर सकते हैं

— ठाडे अरलो
स्रोत