अभिभावक (ऊंचाई) को माता-पिता की शेष ऊंचाई पर कब्जा कर लें

Question

http://jsfiddle.net/S8g4E/

मेरे पास divदो बच्चों वाला एक कंटेनर है । पहले बच्चे की ऊंचाई दी गई है। divविशिष्ट ऊंचाई दिए बिना मैं कंटेनर के "खाली स्थान" पर कब्जा करने के लिए दूसरा बच्चा कैसे बना सकता हूं ?

उदाहरण में, गुलाबी divको सफेद स्थान पर भी कब्जा करना चाहिए।

---

इस सवाल के समान: कैसे शेष ऊंचाई पर कब्जा करने के लिए?

लेकिन मैं स्थिति को पूर्णता नहीं देना चाहता ।

Comments

मैंने दूसरे बच्चे को ऊँचाई 100% देने की कोशिश की लेकिन काम नहीं कर रहा: jsfiddle.net/S8g4E/1

— अल्वारो

Answer 1

#downशेष स्थान को भरने के लिए बच्चे का विस्तार करना #containerविभिन्न तरीकों से पूरा किया जा सकता है जो उस ब्राउज़र समर्थन पर निर्भर करता है जिसे आप प्राप्त करना चाहते हैं और #upउसकी परिभाषित ऊंचाई है या नहीं ।

नमूने

.container {
  width: 100px;
  height: 300px;
  border: 1px solid red;
  float: left;
}
.up {
  background: green;
}
.down {
  background: pink;
}
.grid.container {
  display: grid;
  grid-template-rows: 100px;
}
.flexbox.container {
  display: flex;
  flex-direction: column;
}
.flexbox.container .down {
  flex-grow: 1;
}
.calc .up {
  height: 100px;
}
.calc .down {
  height: calc(100% - 100px);
}
.overflow.container {
  overflow: hidden;
}
.overflow .down {
  height: 100%;
}

<div class="grid container">
  <div class="up">grid
    <br />grid
    <br />grid
    <br />
  </div>
  <div class="down">grid
    <br />grid
    <br />grid
    <br />
  </div>
</div>
<div class="flexbox container">
  <div class="up">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
  <div class="down">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
</div>
<div class="calc container">
  <div class="up">calc
    <br />calc
    <br />calc
    <br />
  </div>
  <div class="down">calc
    <br />calc
    <br />calc
    <br />
  </div>
</div>
<div class="overflow container">
  <div class="up">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
  <div class="down">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
</div>

ग्रिड

CSS का gridलेआउट अभी तक एक और विकल्प प्रदान करता है, हालांकि यह फ्लेक्सबॉक्स मॉडल की तरह सीधा नहीं हो सकता है। हालाँकि, इसके लिए केवल कंटेनर तत्व को स्टाइल करना आवश्यक है:

.container { display: grid; grid-template-rows: 100px }

grid-template-rowsएक निश्चित 100px ऊंचाई के रूप में पहली पंक्ति को परिभाषित करता है, और रहने पंक्तियों स्वचालित रूप से शेष स्थान को भरने के खिंचाव जाएगा।

मुझे पूरा यकीन है कि IE11 को -ms-उपसर्गों की आवश्यकता होती है, इसलिए उन ब्राउज़रों में कार्यक्षमता को मान्य करना सुनिश्चित करें जिन्हें आप समर्थन करना चाहते हैं।

flexbox

CSS3 का लचीला बॉक्स लेआउट मॉड्यूल ( flexbox) अब अच्छी तरह से समर्थित है और इसे लागू करना बहुत आसान हो सकता है। क्योंकि यह लचीला है, यह तब भी काम करता है जब #upइसकी कोई परिभाषित ऊंचाई नहीं होती है।

#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }

यह ध्यान रखना महत्वपूर्ण है कि कुछ फ्लेक्सबॉक्स गुणों के लिए IE10 और IE11 समर्थन छोटी गाड़ी हो सकती है, और IE9 या नीचे का कोई समर्थन नहीं है।

परिकलित ऊँचाई

एक और आसान उपाय CSS3 कीcalc कार्यात्मक इकाई का उपयोग करना है , जैसा कि अल्वारो अपने उत्तर में बताते हैं , लेकिन इसके लिए पहले बच्चे की ऊंचाई ज्ञात मूल्य की आवश्यकता होती है:

#up { height: 100px; }
#down { height: calc( 100% - 100px ); }

यह बहुत व्यापक रूप से समर्थित है, एकमात्र उल्लेखनीय अपवाद <= IE8 या Safari 5 (कोई समर्थन नहीं) और IE9 (आंशिक समर्थन) है। कुछ अन्य मुद्दों में ट्रांसफ़ॉर्म या बॉक्स-शैडो के साथ संयोजन में कैल्क का उपयोग करना शामिल है , इसलिए यदि आपकी चिंता है तो कई ब्राउज़रों में परीक्षण करना सुनिश्चित करें।

अन्य विकल्प

बड़े समर्थन की जरूरत है, तो आप जोड़ सकते हैं height:100%;करने के लिए #downएक चेतावनी के साथ गुलाबी div पूरी ऊंचाई कर देगा। यह कंटेनर के लिए अतिप्रवाह का कारण होगा, क्योंकि #upइसे नीचे धकेल रहा है।

इसलिए, आप overflow: hidden;इसे ठीक करने के लिए कंटेनर में जोड़ सकते हैं ।

वैकल्पिक रूप से, यदि ऊँचाई #upतय की गई है, तो आप इसे कंटेनर के भीतर पूरी तरह से रख सकते हैं, और एक पेडिंग-टॉप को जोड़ सकते हैं #down।

और, फिर भी एक अन्य विकल्प तालिका प्रदर्शन का उपयोग करना होगा:

#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}​

Comments

मैं चाहूंगा कि # उल्टा # ऊँचाई - # ऊँचाई हो। तो अतिप्रवाह छिपा हुआ वह नहीं है जिसकी मुझे तलाश है। और पूर्ण स्थिति का उपयोग नहीं करना चाहते हैं। धन्यवाद!

— अल्वारो

@ अलवरो, मैंने टेबल डिस्प्ले का उपयोग करते हुए एक और विकल्प जोड़ा है। यहां नुकसान संगतता है। पुनश्च एक तत्व कंटेनर के बिल्कुल अंदर position: relative;स्थित है, यह कंटेनर के सापेक्ष स्थित है, न कि खिड़की। तो, यह एक व्यवहार्य विकल्प होना चाहिए।

— उपयोगकर्ता

तालिका-पंक्ति आपके लिए काम कर रही होनी चाहिए, प्रमाण के लिए यह jsFiddle देखें । स्थिति निरपेक्ष विधि, इस फिडेल के समान परिणाम प्राप्त करने में सक्षम नहीं होगी, इसलिए हम सूची से दूर कर सकते हैं (#down और #container की उस परिदृश्य में समान ऊंचाई होगी)।

— उपयोगकर्ता

आप बहुत पूछ रहे हैं, @ अलवारो। CSS एक स्क्रिप्टिंग भाषा नहीं है; यह सामान की गणना नहीं कर सकता। आप भ्रम या जेएस के साथ फंस गए हैं।

— जेजेन थॉमस

@Quantastical, आपकी मदद के लिए धन्यवाद, लेकिन आपके नवीनतम संपादन में आपने मेरे द्वारा पोस्ट किए गए उत्तर की प्रतिलिपि बनाई। कुछ इसके बारे में कम से कम अच्छा होगा।

— अल्वारो

Answer 2

यह सवाल पूछे जाने के लगभग दो साल हो चुके हैं। मैं अभी सीएसएस कैल्क () के साथ आया था जो इस मुद्दे को हल करता है जो मेरे पास था और मुझे लगा कि किसी को एक ही समस्या होने पर इसे जोड़ना अच्छा होगा। (वैसे मैं पूर्ण स्थिति का उपयोग करके समाप्त हो गया)।

http://jsfiddle.net/S8g4E/955/

यहाँ सी.एस.ई.

#up { height:80px;}
#down {
    height: calc(100% - 80px);//The upper div needs to have a fixed height, 80px in this case.
}

और इसके बारे में अधिक जानकारी यहाँ: http://css-tricks.com/a-couple-of-use-cases-for-cals/

ब्राउज़र समर्थन: http://caniuse.com/#feat=calc

Comments

मैं भी CSS3 का उपयोग कर रहा हूं, calcजहां विस्तृत ब्राउज़र समर्थन उतना महत्वपूर्ण नहीं है (IE8 और नीचे और सफारी 5 इसका समर्थन नहीं करते हैं)।

— उपयोगकर्ता

गतिशील #upऊँचाई के समान करने का कोई तरीका ?

— एडम वेट

@AdamWaite, एक गतिशील #up ऊंचाई के साथ, आप अन्य उत्तर में वर्णित अतिप्रवाह समाधान का उपयोग करना चाहेंगे।

— उपयोगकर्ता

Answer 3

मेरा उत्तर केवल CSS का उपयोग करता है, और यह अतिप्रवाह का उपयोग नहीं करता है: छिपा हुआ या प्रदर्शन: तालिका-पंक्ति। यह आवश्यक है कि पहले बच्चे को वास्तव में एक ऊँचाई दी गई हो, लेकिन आपके प्रश्न में आप यह कहते हैं कि केवल दूसरे बच्चे को इसकी ऊँचाई की आवश्यकता नहीं है, इसलिए मेरा मानना ​​है कि आपको यह स्वीकार्य लगना चाहिए।

एचटीएमएल

<div id="container">
    <div id="up">Text<br />Text<br />Text<br /></div>
    <div id="down">Text<br />Text<br />Text<br /></div>
</div>

सीएसएस

#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; height: 63px; float:left; width: 100% }
#down { background:pink; padding-top: 63px; height: 100%; box-sizing: border-box; }

http://jsfiddle.net/S8g4E/288/

Answer 4

डेमो देखें - http://jsfiddle.net/S8g4E/6/

उपयोग सीएसएस -

#container { width: 300px; height: 300px; border:1px solid red; display: table;}
#up { background: green; display: table-row; }
#down { background:pink; display: table-row;}

Comments

आपको यह सुनिश्चित height: 1pxकरने के #upलिए जोड़ना चाहिए कि यह ऊंचाई की न्यूनतम राशि लेता है। यहाँ के लिए ब्राउज़र समर्थन है display: table: caniuse.com/css-table

— तीसहॉट

क्या आप मुझे दिखा सकते हैं कि यह समाधान इस "अधिक जटिल" उदाहरण में कैसे प्राप्त किया जा सकता है, कृपया: jsfiddle.net/fyNX4 बहुत-बहुत धन्यवाद

— Alvaro

Answer 5

जब तक मैं गलत समझ रहा हूँ, तुम बस जोड़ सकते हैं height: 100%;और overflow:hidden;करने के लिए #down।

#down { 
    background:pink; 
    height:100%; 
    overflow:hidden;
}​

लाइव डेमो

संपादित करें: चूंकि आप उपयोग नहीं करना चाहते हैं overflow:hidden;, इसलिए आप display: table;इस परिदृश्य के लिए उपयोग कर सकते हैं ; हालाँकि, यह IE 8 से पहले समर्थित नहीं है ( display: table;समर्थन )

#container { 
    width: 300px; 
    height: 300px; 
    border:1px solid red;
    display:table;
}

#up { 
    background: green;
    display:table-row;
    height:0; 
}

#down { 
    background:pink;
    display:table-row;
}​

लाइव डेमो

नोट: आपने कहा है कि आप चाहते हैं #downऊंचाई होने की #containerऊंचाई शून्य से #upऊंचाई। display:table;समाधान वास्तव में है कि और इस jsfiddle कि बहुत स्पष्ट रूप से चित्रित करेंगे।

Comments

मैं नहीं चाहता कि # कॉन्ट्रोवर्सी ऊंचाई से # डाउन हो

— अल्वारो

मैंने बस उस पर ध्यान दिया। आप overflow:hiddenअतिरिक्त सामग्री को छिपाने के लिए जोड़ सकते हैं ।

— जोश में

मैं कॉपी करूँगा / पेस्ट करूँगा कि मैंने मिस्टरलेयर को क्या कहा: मैं # डाउन में #container ऊंचाई - #up ऊंचाई रखना चाहूंगा। तो अतिप्रवाह छिपा हुआ वह नहीं है जिसकी मुझे तलाश है। और पूर्ण स्थिति का उपयोग नहीं करना चाहते हैं। धन्यवाद!

— अल्वारो

इसके साथ समस्या यह है कि यदि आप दो divs को अपने उदाहरण में वापस करते हैं तो हरी div बाहर है।

— सीड सेप

यह प्रश्न का उत्तर नहीं देता है। यह बताता है कि "शेष सभी ऊंचाई पर कब्जा करने के लिए", हालांकि यह शेष ऊंचाई के सभी पर कब्जा कर लेता है, वहाँ अतिप्रवाह होगा।

— गिरिधर कार्णिक

Answer 6

सार

मुझे पूरी तरह से संतोषजनक उत्तर नहीं मिला, इसलिए मुझे इसे स्वयं पता लगाना पड़ा।

मेरी आवश्यकताएं:

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

---

समाधान

• फ्लेक्सबॉक्सेज़ को सभी प्रत्यक्ष माता-पिता को गणना की गई ऊँचाई (यदि कोई हो) और अगले माता-पिता जिनकी ऊँचाई निर्दिष्ट है , में बदल दें;
• गणना की गई ऊंचाई (यदि कोई है) और तत्व के साथ सभी प्रत्यक्ष माता-पिताflex-grow: 1 को निर्दिष्ट करें ताकि वे तत्व सामग्री का आकार छोटा होने पर शेष सभी जगह ले जाएं;
• निर्दिष्ट flex-shrink: 0करने के लिए निश्चित ऊंचाई के साथ सभी फ्लेक्स आइटम ताकि वे छोटे जब तत्व सामग्री आकार शेष अंतरिक्ष आकार से बड़ी है नहीं हो जाएगा;
• परिकलित ऊँचाई (यदि कोई हो) के साथ सभी प्रत्यक्ष अभिभावकोंoverflow: hidden को निर्दिष्ट करें कि वे अतिप्रवाह सामग्री को प्रदर्शित करने के लिए स्क्रॉलिंग और निषिद्ध को अक्षम करें;
• इसके अंदर स्क्रॉलिंग को सक्षम overflow: autoकरने के लिए तत्व को निर्दिष्ट करें ।

---

JSFiddle (तत्व की गणना प्रत्यक्ष ऊंचाई वाले माता-पिता करते हैं)

JSFiddle (सरल मामला: गणना की ऊंचाई के साथ कोई प्रत्यक्ष माता-पिता)

Answer 7

आप सामग्री को नीचे धकेलने के लिए फ़्लोट का उपयोग कर सकते हैं:

http://jsfiddle.net/S8g4E/5/

आपके पास एक निश्चित आकार का कंटेनर है:

#container {
    width: 300px; height: 300px;
}

सामग्री को फ़्लोट के बगल में बहने की अनुमति है। जब तक हम फ्लोट को पूरी चौड़ाई पर सेट नहीं करते:

#up {
    float: left;
    width: 100%;
}

शीर्ष स्थिति को साझा #upऔर #downसाझा करते समय , #downफ़्लोट के नीचे के बाद ही सामग्री शुरू हो सकती है #up:

#down {
    height:100%;
}​

Comments

ध्यान दें कि #upवास्तव में इसके शीर्ष भाग को शामिल किया गया है #down: jsfiddle.net/thirtydot/S8g4E/9

— Bindot

हाँ, यह है कि यह कैसे काम करता है। लेकिन अगर ओपी को एक गोल सीमा या किसी अन्य फैंसीनेस की आवश्यकता नहीं है #up, तो यह संभवतः स्वीकार्य है।

— द्विजोपल २

यह समाधान करीब है, लेकिन मैं चाहूंगा कि # # ऊंचाई # ऊंचाई की हो - # ऊंचाई। (आपके समाधान में # उलट ऊंचाई = # संबंध ऊंचाई)। धन्यवाद '

— अल्वारो

@ अलवरो: ऐसा होने की आवश्यकता क्यों है? यह समाधान ज्यादातर मामलों में सही दिखता है, भले ही यह केवल एक भ्रम हो।

— तीसवाँ

खैर, यह सवाल इस अधिक "जटिल" उदाहरण से एक सरलीकृत उदाहरण है: jsfiddle.net/fyNX4 वहाँ काम नहीं करेगा, नहीं?

— अल्वारो

Answer 8

मुझे यकीन नहीं है कि यह पूरी तरह से सीएसएस के साथ किया जा सकता है, जब तक कि आप भ्रम के साथ इसे फैंकने में सहज नहीं होते। शायद जोश मीन के जवाब का उपयोग करें, और करने के #containerलिए सेट करें overflow:hidden।

इसके लायक क्या है, यहां एक jQuery समाधान है:

var contH = $('#container').height(),
upH = $('#up').height();
$('#down').css('height' , contH - upH);

Comments

धन्यवाद मैं एक शुद्ध सीएसएस समाधान की तलाश में था।

— अल्वारो