डीआईवी के अंदर दो डीआईवी। दूसरे डीआईवी द्वारा पैरेंट डीआईवी की जगह को स्वतः भरने के लिए कैसे?

Question

देखें कि मेरा क्या मतलब है -

मेरे पास एक मूल डीआईवी है, इसके भीतर लंबवत क्रम में दो डीवी हैं। शीर्ष डीआईवी में केवल अपनी सामग्री की ऊंचाई होनी चाहिए, जबकि निचले डीआईवी को सामग्री ऊंचाइयों के बावजूद माता-पिता डीआईवी की सभी जगहों पर कब्जा करना चाहिए, और माता-पिता डीआईवी को ओवरलैप नहीं करना चाहिए।

HTML:

<div class="outer"> 
    <div class="inner-title"> 
     THIS IS MY TITLE 
    </div> 
    <div class="inner-content"> 
     CONTENT AREA 
    </div> 
</div> 

सीएसएस:

html,body 
{ 
height: 100%; 
} 

.outer 
{ 
    background-color:blue; 
    height: 80%; 
} 

.inner-title 
{ 
    background-color:red; 
} 

.inner-content 
{ 
background-color:yellow; 
    height: auto; 
} 

संक्षेप में, "इनर-सामग्री" ओवरलैपिंग के बिना "बाहरी" DIV, के सभी शेष अंतरिक्ष ले लेना चाहिए।

इस बारे में कोई विचार कैसे प्राप्त किया जाए?

इस पर बहुत मदद की सराहना की।

Answer 1

जोड़े display:table; माता पिता div करने के लिए और display:table-row; बच्चे को पहले बच्चे div को

और height:0 divs। यह ऑटो ऊंचाई

html,body{ 
    height: 100%; 
} 
.outer{ 
    background-color:blue; 
    height: 80%; border:red solid 2px; 
    display: table; 
    width:100% 
} 
.inner-title{ 
    background-color:red; 
    display:table-row; 
    width:100% 
} 
.inner-content{ 
    background-color:grey; 
    display:table-row; 
    width:100%; 
    height:100% 
} 

DEMO UPDATED

Answer 2

एक नयी सीएसएस तरह से एक मिनट की स्थापना के बारे में flexbox

/*QuickReset*/ *{box-sizing:border-box;margin:0;} html,body{height:100%;} 
 

 
.flex-col { 
 
    display: flex; 
 
    flex-direction: column; /* or: flex-flow: column wrap; */ 
 
    height: 100%; 
 
} 
 

 
.flex-fill { /* Add this class to the element you want to expand */ 
 
    flex: 1; 
 
}

<div class="flex-col"> 
 
    <div style="background:red;"> HEADER </div> 
 
    <div class="flex-fill" style="background:yellow;"> CONTENT </div> 
 
    <div style="background:red;"> FOOTER</div> 
 
</div>