आंतरिक सामग्री फिट करने के लिए विस्तार योग्य डीआईवी ऊंचाई - मैं गलत क्या कर रहा हूं? कई अन्य लोगों की तरह मैं खोज की है -

Question

अद्यतन

इस हल, यह सबसे भीतरी ऑटो ऊंचाई के लिए की आवश्यकता होगी, div, के रूप में यह एक निश्चित ऊंचाई है कि मैं पूरी तरह से

---

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

.clear { 
    clear: both; 
} 

.video_multi, .video_multi, .image_multi, .image_multi, .text_multi, .text_multi { 
    display: none; 
} 

#feedback_question { 
    background: transparent url('<?php echo img_path(); ?>feedback/question/question_bg.png') no-repeat scroll; 
    height: auto; 
} 

#title_bar { 
    height: 170px; 
    border: 1px solid #EBDDE2; 
    background: white; 
    width: 501px; 
    margin-top: 41px; 
    margin-left: 8.5px; 
} 

#brand_image { 
    height: 120px; 
    width: 170px; 
    border: 2.5px solid #EBDDE2; 
    margin: 20px; 
    float: left; 
} 

#brand_text { 
    float: right; 
    width: 283px; 
    height: 150px; 
    padding-top: 20px; 
} 

#brand_title { 
    font-size: 28px; 
    color: #4365c6; 
} 

#brand_description { 
    width: 280px; 
} 

#question_tabs { 
    background: transparent url('<?php echo img_path(); ?>feedback/question/tab_bar.png') no-repeat scroll; 
    height: 40px; 
    padding-top: 22px; 
} 


#question_background { 
    border-left: 1px solid #057eb5; 
    border-right: 1px solid #057eb5; 
    border-top: 1px solid #057eb5; 
    height: 335px; 
    width: 501px; 
    margin-bottom: -12px; 
    overflow: hidden; 

} 

#tab_list { 
    margin-bottom: 5px; 
} 
.tab { 
    background: transparent url('<?php echo img_path(); ?>feedback/question/question_tab_sprite.png') no-repeat scroll 0 0; 
    cursor: pointer; 
    display: inline; 
    height: 54px; 
    list-style: none outside none; 
    margin-right: -3px; 
    padding-left: 16px; 
    padding-right: 13px; 
    padding-top: 13px; 
    width: 29px; 
    color: white; 
    font-weight: bold; 
} 

.tab_hover{ 
    background-position: 0px -32px; 
} 

.tab_selected { 
    background-position: 0px -64px; 
    color: #0881ba; 
} 


#bottom_button_holder { 
    background: transparent url('<?php echo img_path(); ?>feedback/question/question_button_bg.png') no-repeat scroll; 
    height: 47px; 
    width: 503px; 
    display: block; 

} 

#next_button { 
    background: transparent url('<?php echo img_path(); ?>feedback/question/next_button.png') no-repeat scroll; 
    height: 33px; 
    width: 98px; 
    display: block; 
    position: relative; 
    left: 375px; 
    top: 5px; 
    cursor: pointer; 
} 

.question_body { 
    height: 270px; 
    width: 500px; 
} 

.question_image_holder { 
    list-style: none; 
    display: inline; 
    margin-right: 15px; 
    width: 100px; 
} 

.question_answer_box { 
    width: 350px; 
    padding-left: 100px; 
} 

.answer { 
    position: relative; 
    bottom: 45px; 
} 

.question { 
    margin-left: 5px; 
} 

.answer_text { 
    width: 100px; 
} 

.answer_list_item { 
    list-style: none; 
} 

#background_stretch { 
    background: transparent url('<?php echo img_path(); ?>feedback/question/question_bg_repeat.png') repeat-y scroll 0 0; 
    display: block; 
    height:auto; 
    padding-left: 8.5px; 
} 

#background_bottom { 
    background: transparent url('<?php echo img_path(); ?>feedback/question/question_bg_bottom.png') no-repeat scroll; 
    display: block; 
    height: 90px; 
    width: 520px; 
    padding-left: 4px; 
    padding-top: 20px; 

} 

#bottom_section { 
    position: relative; 

} 

#invite_button { 
    background: transparent url('<?php echo img_path(); ?>feedback/question/invite_button.png') no-repeat scroll; 
    display: block; 
    height: 52px; 
    width: 512px; 
    position: relative; 

} 

---

वैसे भी, के रूप में आप को देखने के लिए सक्षम होना चाहिए -

<div id="feedback_question" class="span-14"> 
<div id="title_bar"> 
    <img id="brand_image" src="<?php echo img_path() . $title_row[0]->filename;?>"> 
    <div id="brand_text"> 
     <div id="brand_title"><?php echo $title_row[0]->name;?></div> 
     <div id="brand_description"><?php echo $title_row[0]->description;?></div> 
    </div> 
</div> 

<div id="background_stretch"> 
    <div id="question_background"> 
     <div id="question_tabs" class="span-14"> 
      <ul id="tab_list"> 
       <?php for($i = 1; $i <= $maxQuestions; $i++) { ?> 
       <li class="tab" id="tab_<?php echo $i; ?>"> 
        Q<?php echo $i; ?> 
       </li> 
       <?php }; ?> 
      </ul> 
      <div class="question_body"> 
      <!--Load question template here --> 
      <?php echo $questions?> 
      </div> 
     </div> 
    </div> 
    <div id="bottom_section"> 
     <div id="bottom_button_holder"> 
      <div id="next_button"></div> 
     </div> 
    </div> 
    <br class="clear" /> 
</div> 
<div id="background_bottom"> 
    <a id="invite_button" href="#"><img src="<?php echo img_path(); ?>feedback/question/invite_button.png"/></a> 
</div> 

---

और यहाँ मेरी सीएसएस है यह मेरी पृष्ठभूमि_स्ट्रेच और प्रश्न_बैकग्राउंड div है जो सामग्री के साथ फैलता है, यह सब ठीक काम करता है और यदि मैं ऊँचाई बदलता हूं प्रश्न_बैकग्राउंड की टी सबकुछ बढ़ती है जैसा इसे करना चाहिए। हालांकि, यह मेरी आंतरिक सामग्री ऊंचाई को समायोजित करने के लिए question_background प्राप्त कर रहा है जो मेरे लिए समस्या है।

मैंने स्पष्ट के विभिन्न संस्करणों की कोशिश की है: दोनों और अलग-अलग बक्से फ़्लोटिंग, सभी का कोई फायदा नहीं हुआ ... क्या मैंने इसे जटिल बना दिया है?

मैं क्या गलत कर रहा हूं? मुझे यह कैसे हासिल होगा?

मुझे प्राप्त होने वाली किसी भी सहायता की सराहना करें।

Answer 1

#question_background की ऊंचाई है, यदि इसकी निश्चित ऊंचाई है तो इससे कोई फर्क नहीं पड़ता कि इसमें कितनी देर तक सामग्री है।

इसके अलावा, अगली बार जब आप इतनी विस्तृत मात्रा में कोड पोस्ट कर रहे हैं तो कृपया jsfiddle.net का उपयोग करें ताकि हम आसानी से परीक्षण कर सकें।

Answer 2

height: auto; के बजाय तत्व "विस्तार योग्य" बनाने के लिए आपको overflow: auto; (जब आप float बदलते हैं) का उपयोग करना चाहिए। लेकिन जब आप ऊंचाई को छू नहीं पाएंगे तो यह स्वचालित रूप से फिट होगा - जैसा कि @kokos ने कहा था। बीटीडब्लू: आप कौन सा डिव विस्तार करना चाहते हैं? (यदि मैं सही अनुमान लगाया आप feedback_question वर्ग के साथ div बनाना चाहते)

उपयोगी संकेत: JsFiddle