सीएसएस - फ़्लोट चाइल्ड का विस्तार करें DIV की ऊंचाई माता-पिता की ऊंचाई तक

Question

मेरे पास पृष्ठ संरचना इस प्रकार है:

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

अब, child-leftDIV में अधिक सामग्री होगी, इसलिए parentDIV की ऊंचाई बाल DIV के अनुसार बढ़ जाती है।

लेकिन समस्या यह है कि child-rightऊंचाई नहीं बढ़ रही है। माता-पिता के बराबर मैं इसकी ऊंचाई कैसे बना सकता हूं?

Comments

सरल। आसान। फ्लेक्सबॉक्स के साथ समान ऊंचाई कॉलम ।

— माइकल बेंजामिन

Answer 1

के लिए parentतत्व, निम्नलिखित गुण जोड़ें:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

तो .child-rightइन के लिए:

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

सीएसएस उदाहरण के साथ और अधिक विस्तृत परिणाम प्राप्त करें यहाँ और समान ऊंचाई कॉलम के बारे में अधिक जानकारी के लिए यहाँ ।

Comments

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

— ईमोन नेरबोन

मैं देख रहा हूं कि आप सब कुछ तैर नहीं रहे हैं - इसलिए इसे स्केलिंग न करने की कीमत पर परिभाषित किया जाता है यदि कभी दायां कॉलम बाएं से अधिक लंबा हो जाता है (जो वास्तव में ओपी के सवाल में ऐसा नहीं है)।

— ईमोन नेरबोन

हां, आपको इसे जोड़ने की आवश्यकता है: पैडिंग-बॉटम: 32768px; मार्जिन-तल: -32768px; बच्चों के लिए।

— माइकल

यह तब तक काम करता है जब तक दाहिने कॉलम में कम सामग्री होने की गारंटी दी जाती है, फिर बाईं ओर या फिर इसे क्लिप किया जाएगा। इसके अलावा, मैंने बेकार घोषणाओं को छोड़ देने के उत्तर को संपादित किया।

— क्रिस्टोफ़

@MatthewBlackford: यह एक "हैक" है, जिसमें यह मार्जिन गिरने से रोकता है। आप अन्य तरीकों से मार्जिन को गिरने से रोक सकते हैं, जैसे कि 1px पारदर्शी बॉर्डर का उपयोग, लेकिन संक्षेप में, लेकिन यहां महत्वपूर्ण बात यह है कि आप मार्जिन पतन से बचें। मैं इस समाधान का उपयोग एक अंतिम उपाय के रूप में नहीं करूंगा क्योंकि यह अजीब लेआउट त्रुटियों और अप्रत्याशित फसल (या सामग्री को कम करने) का कारण बनता है जब आपकी धारणाएं दोषपूर्ण हो जाती हैं। संक्षेप में: आप ऐसा तब तक नहीं करना चाहते जब तक आपको वास्तव में इसकी आवश्यकता न हो।

— Eamon Nerbonne

Answer 2

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

1. display: flex: अब तक का सबसे सरल और सबसे अच्छा समाधान और बहुत लचीला - लेकिन IE9 और पुराने द्वारा असमर्थित।
2. tableया display: table: बहुत सरल, बहुत संगत (हर ब्राउज़र कभी बहुत), काफी लचीला।
3. display: inline-block; width:50% एक नकारात्मक मार्जिन हैक के साथ: काफी सरल, लेकिन स्तंभ-नीचे की सीमाएं थोड़ी मुश्किल हैं।

1। display:flex

यह वास्तव में सरल है, और अधिक जटिल या अधिक विस्तृत लेआउट के लिए अनुकूलित करना आसान है - लेकिन फ्लेक्सबॉक्स केवल IE10 या बाद में (अन्य आधुनिक ब्राउज़रों के अलावा) द्वारा समर्थित है।

उदाहरण: http://output.jsbin.com/hetunujuma/1

प्रासंगिक HTML:

<div class="parent"><div>column 1</div><div>column 2</div></div>

प्रासंगिक सीएसएस:

.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }

फ्लेक्सबॉक्स में बहुत अधिक विकल्पों के लिए समर्थन है, लेकिन उपरोक्त सभी स्तंभों की संख्या के लिए बस!

2. <table>याdisplay: table

ऐसा करने के लिए एक सरल और अत्यंत संगत तरीका है table- मैं आपको पुराने-आईई समर्थन की आवश्यकता होने पर सबसे पहले आपको सलाह देने की कोशिश करूंगा । आप स्तंभों से निपट रहे हैं; divs + floats बस ऐसा करने का सबसे अच्छा तरीका नहीं है (इस तथ्य का उल्लेख नहीं करना है कि बस सीएसएस सीमाओं के आसपास हैक करने के लिए नेस्टेड डिवीजनों के कई स्तर शायद ही एक सरल तालिका का उपयोग करने की तुलना में अधिक "अर्थ" है)। यदि आप tableतत्व का उपयोग नहीं करना चाहते हैं , तो सीएसएस पर विचार करेंdisplay: table (IE7 और पुराने द्वारा असमर्थित)।

उदाहरण: http://jsfiddle.net/emn13/7FFp3/

प्रासंगिक html: (लेकिन<table>इसके बजायसादे का उपयोग करने पर विचार करें)

<div class="parent"><div>column 1</div><div>column 2</div></div>

प्रासंगिक सीएसएस:

.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/

यह दृष्टिकोण overflow:hiddenफ्लोट्स के साथ उपयोग करने से कहीं अधिक मजबूत है । आप बहुत अधिक संख्या में कॉलम जोड़ सकते हैं; यदि आप चाहें तो आप उन्हें ऑटो-स्केल कर सकते हैं; और आप प्राचीन ब्राउज़रों के साथ संगतता बनाए रखते हैं। फ्लोट समाधान के विपरीत, आपको पहले से यह जानने की आवश्यकता नहीं है कि कौन सा कॉलम सबसे लंबा है; ऊंचाई तराजू ठीक है।

KISS: जब तक आप विशेष रूप से करने की जरूरत है नाव हैक्स उपयोग नहीं करते। यदि IE7 एक समस्या है, तो मैं अभी भी एक हार्ड-टू-मेंटेनेंस, कम लचीले चाल-सीएसएस समाधान पर सीमैटिक कॉलम के साथ एक सादा टेबल चुनूंगा।

वैसे, यदि आपको अपने लेआउट को उत्तरदायी बनाने की आवश्यकता है (जैसे कि छोटे मोबाइल फोन पर कोई कॉलम नहीं) तो आप @mediaछोटे स्क्रीन चौड़ाई के लिए सादे ब्लॉक लेआउट में वापस गिरने के लिए एक क्वेरी का उपयोग कर सकते हैं - यह काम करता है चाहे आप उपयोग करें <table>या किसी अन्य display: tableतत्व।

3. display:inline blockएक नकारात्मक मार्जिन हैक के साथ।

एक अन्य विकल्प का उपयोग करना है display:inline block।

उदाहरण: http://jsbin.com/ovuqes/2/edit

प्रासंगिक html: (divटैग केबीच रिक्त स्थान की अनुपस्थितिमहत्वपूर्ण है!)

<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>

प्रासंगिक सीएसएस:

.parent { 
    position: relative; width: 100%; white-space: nowrap; overflow: hidden; 
}

.parent>div { 
    display:inline-block; width:50%; white-space:normal; vertical-align:top; 
}

.parent>div>div {
    padding-bottom: 32768px; margin-bottom: -32768px; 
}

यह थोड़ा मुश्किल है, और नकारात्मक मार्जिन का मतलब है कि कॉलम का "सही" तल अस्पष्ट है। बदले में इसका मतलब है कि आप उन स्तंभों के निचले हिस्से के सापेक्ष कुछ भी नहीं कर सकते क्योंकि इससे कट जाता है overflow: hidden। ध्यान दें कि इनलाइन-ब्लॉक के अलावा, आप फ्लोट्स के साथ एक समान प्रभाव प्राप्त कर सकते हैं।

---

TL; DR : फ्लेक्सबॉक्स का उपयोग करें यदि आप IE9 और पुराने को अनदेखा कर सकते हैं; अन्यथा (css) तालिका आज़माएँ। यदि उन विकल्पों में से कोई भी आपके लिए काम नहीं करता है, तो नकारात्मक मार्जिन हैक होते हैं, लेकिन ये अजीब प्रदर्शन मुद्दों का कारण बन सकते हैं जो विकास के दौरान आसानी से छूट जाते हैं, और लेआउट सीमाएं हैं जिनके बारे में आपको जानकारी होना चाहिए।

Comments

एक अच्छा, लेकिन यह ध्यान देने योग्य है कि आप इन कोशिकाओं के बीच मार्जिन का उपयोग करने में असमर्थ हैं (और यदि आप उन्हें स्टाइल करना चाहते हैं तो पैडिंग मदद नहीं करेगा)।

— Wordpressor

border-spacing:10px;टेबल एलिमेंट में मार्जिन जैसी स्पेसिंग शुरू होगी। वैकल्पिक रूप से, आप अतिरिक्त (खाली) कॉलम जोड़ सकते हैं जहां आप अतिरिक्त स्थान चाहते हैं। और आप टेबल-सेल के अंदर पैडिंग भी जोड़ सकते हैं; हालाँकि, पैडिंग को पृष्ठभूमि में शामिल किया जाएगा, ताकि वह वह न हो जो आप चाहते हैं। लेकिन आप सही कह रहे हैं कि यह सामान्य मार्जिन जितना लचीला नहीं है। और आप कॉलम के सापेक्ष कुछ भी स्थिति में नहीं रख सकते हैं, जो एक समस्या हो सकती है।

— ईमोन नेरबोन

तो यह बेहतर है टेबल-कम लेआउट या नहीं?

— गतिशील

मुझे कहना है: मैं आपसे सहमत हूं कि इस मामले में एक साधारण तालिका पर्याप्त से अधिक है। समस्या यह है कि प्रत्येक लेआउट को टेबल के साथ अवहेलना करने का एक आम दृश्य है

— गतिशील

तालिका के साथ समस्या यह है कि जब स्क्रीन को एक छोटी चौड़ाई (उत्तरदायी डिज़ाइन) में बदल दिया जाता है, तो तालिका कोशिकाओं को अगले एक के शीर्ष पर एक टाइल लगाने के बजाय स्क्विट हो जाता है। पैडिंग-बॉटम के साथ दूसरी विधि: 32768px; मार्जिन-तल: -32768px; काफी आश्चर्यजनक है और लगभग वही करता है जिसकी मुझे ज़रूरत थी ... उस एक के लिए धन्यवाद ... बॉर्डर बॉटम एक मुद्दा है ...

— सर्ज सगन

Answer 3

माता पिता के लिए:

display: flex;

बच्चों के लिए:

align-items: stretch;

आपको कुछ उपसर्ग जोड़ने चाहिए, कैनिअस की जांच करें।

Comments

सिफारिश नहीं करेंगे। IE9 अभी भी एक चीज है।

आपके उत्तर के लिए धन्यवाद; यह अच्छा काम करता है! "आपको कुछ उपसर्ग जोड़ने चाहिए, कैनीज़ की जांच करें।" उस लाइन का क्या मतलब है? क्या आप शुरुआती लोगों के लिए थोड़ी और जानकारी जोड़ सकते हैं?

— एमडी सिफतुल इस्लाम

@MdSifatulIslam यहां जाएं: caniuse.com/#feat=flexbox आप देख सकते हैं कि क्या कुछ ब्राउज़र youu को ज़रूरत है ताकि सुविधा उपसर्ग का समर्थन कर सके।

— Aiphee

Answer 4

मुझे बहुत सारे उत्तर मिले, लेकिन शायद मेरे लिए सबसे अच्छा समाधान है

.parent { 
  overflow: hidden; 
}
.parent .floatLeft {
  # your other styles
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

आप अन्य समाधान यहां देख सकते हैं http://css-tricks.com/fluid-width-equal-height-columns/

Comments

मुझे नहीं पता कि यह क्यों काम करता है, लेकिन यह मेरी समस्या को एक आकर्षण की तरह हल करता है। धन्यवाद

— मिलाएं

मेरे लिए भी काम करता है। हालांकि यह साफ तरीका नहीं है। धन्यवाद!

— मार्क एंथोनी उई

हैकी नरक के रूप में। मैं एक उत्पादन अनुप्रयोगों के लिए इसकी सिफारिश नहीं करता हूं

— फेडेरिको कैपल्डो

यह अद्भुत है। मुझे नहीं लगता था कि यह वास्तव में काम करेगा

— टॉम मैकडोनो

Answer 5

कृपया पैरेंट डिव को overflow: hidden
तब चाइल्ड डिव में सेट करें जब आप पेडिंग-बॉटम के लिए बड़ी राशि सेट कर सकते हैं। उदाहरण के लिए
padding-bottom: 5000px
तब margin-bottom: -5000px
और फिर सभी बाल विभाग माता-पिता की ऊंचाई होंगे।
बेशक यह अभ्यस्त काम है अगर आप माता-पिता की डिव में सामग्री डालने की कोशिश कर रहे हैं (अन्य डिवोर्स के बाहर)

.parent{
    border: 1px solid black;
    overflow: hidden;
    height: auto;
}
.child{
    float: left;
    padding-bottom: 1500px;
    margin-bottom: -1500px;
}
.child1{
    background: red;
    padding-right: 10px;    
}
.child2{
    background: green;
    padding-left: 10px;
}

<div class="parent">
    <div class="child1 child">
        One line text in child1
    </div>
    <div class="child2 child">
        Three line text in child2<br />
        Three line text in child2<br />
        Three line text in child2
    </div>
</div>

उदाहरण: http://jsfiddle.net/Tareqdhk/DAFEC/

Comments

थोड़ा गंदा लगता है, लेकिन मेरे लिए काम किया - इस सवाल का एकमात्र समाधान। मैंने ट्विटर बूटस्ट्रैप का उपयोग करके यह कोशिश की।

— cukabeka

Answer 6

क्या माता-पिता की ऊंचाई है? यदि आप माता-पिता की ऊंचाई इतनी निर्धारित करते हैं।

div.parent { height: 300px };

फिर आप बच्चे को इस तरह पूरी ऊंचाई तक फैला सकते हैं।

div.child-right { height: 100% };

संपादित करें

यहां बताया गया है कि आप जावास्क्रिप्ट का उपयोग कैसे करते हैं।

Comments

माता-पिता की एक निश्चित ऊंचाई नहीं होती है। इसका विस्तार बच्चे की बाईं ऊंचाई के अनुसार होता है।

— वीरा

आह, मैंने सोचा था कि तब आपको कुछ जावास्क्रिप्ट की आवश्यकता होगी, मैं इसे एक सेकंड में जोड़ दूंगा।

— ओलिकल

@ ऑरल जेएसफिल्ड लिंक टूट गया है। या तो इसे हटा दें या उत्तर को अपडेट करें। धन्यवाद!

— सिंतबर को

— Js

Answer 7

सीएसएस तालिका प्रदर्शन इसके लिए आदर्श है:

.parent {
  display: table;
  width: 100%;
}
.parent > div {
  display: table-cell;
}
.child-left {
  background: powderblue;
}
.child-right {
  background: papayawhip;
}

<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

मूल उत्तर (माना जाता है कि कोई भी कॉलम लंबा हो सकता है):

आप कोशिश कर रहे हैं कि माता-पिता की ऊँचाई बच्चों की ऊँचाई और बच्चों की ऊँचाई माता-पिता की ऊँचाई पर निर्भर हो। गणना नहीं होगी। CSS Faux कॉलम सबसे अच्छा समाधान है। ऐसा करने का एक से अधिक तरीका है। मैं बल्कि जावास्क्रिप्ट का उपयोग नहीं करेंगे।

Comments

अच्छी बात। कैसे के बारे में अगर बच्चों की ऊंचाई सबसे ऊंचे भाई-बहन की ऊंचाई पर निर्भर है (चाहे वह माता-पिता की ऊंचाई से निर्धारित हो या नहीं), और माता-पिता से नहीं? मुझे लगता है कि सीएसएस में नहीं किया जा सकता है।

— मकाटो

नहीं, भाई-बहन एक-दूसरे की ऊंचाई को प्रभावित नहीं कर सकते। हालाँकि, display: table+ display: table-cellलेआउट वांछित परिणाम देगा।

— सलमान ए

महान अद्यतन! हालाँकि, मैंने यह कोशिश करना समाप्त कर दिया और मैं चाहता था कि विभा / कोशिकाओं के बीच व्हॉट्सएप जुदाई हो और इसे पूरा करने के लिए टेबल-सेल डिव के भीतर इनर डिव बनाने के लिए समाप्त हो गया और फिर निश्चित रूप से उन्हें पूरी ऊंचाई का उपयोग करने की क्षमता खो दी क्योंकि आंतरिक divs तालिका-कोशिका divs नहीं थे - ठीक उसी समस्या। उसके लिए कोई विचार? लापता सेल-रिक्ति की तरह।

— मकाटो

आह, सीएसएस में सीमा-रिक्ति है! stackoverflow.com/questions/339923/… मैं बॉर्डर-स्पेस का उपयोग करके व्हॉट्सएप पृथक्करण के साथ अच्छी तरह से काम करने में मेरी टेबल-डिव प्राप्त करने में सक्षम था। अब मेरे पास टेबल सेल (रंगीन पृष्ठभूमि ब्लॉक) बनाने की क्षमता है, माता-पिता की पूरी ऊंचाई का उपयोग करें या टेबल-सेल डिव के चतुर उपयोग से नहीं।

— मकाटो

बस एक गौचा है कि मैं में भाग गया: आप के साथ इस का उपयोग नहीं कर सकते float: stackoverflow.com/questions/20110217/…

— जोशुआ पिंटर

Answer 8

मैंने हाल ही में अपनी वेबसाइट पर jQuery का उपयोग करके ऐसा किया है। कोड सबसे बड़ी div की ऊँचाई की गणना करता है और अन्य divs को समान ऊँचाई पर सेट करता है। यहाँ तकनीक है:

http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/

मेरा मानना ​​है कि height:100%काम नहीं करेगा, इसलिए यदि आप स्पष्ट रूप से उस दिव्य ऊंचाइयों को नहीं जानते हैं जो मुझे नहीं लगता कि शुद्ध सीएसएस समाधान है।

Comments

आपको इसे कम से कम तैयार, आकार बदलना, अभिविन्यास परिवर्तन, फ़ॉन्ट आकार बदलना चाहिए।

— netAction

Answer 9

मैंने इसका इस्तेमाल एक टिप्पणी अनुभाग के लिए किया:

.parent {
    display: flex;
    float: left;
    border-top:2px solid black;
    width:635px;
    margin:10px 0px 0px 0px;
    padding:0px 20px 0px 20px;
    background-color: rgba(255,255,255,0.5);
}
    
.child-left {
	align-items: stretch;
	float: left;
	width:135px;
	padding:10px 10px 10px 0px;
	height:inherit;
	border-right:2px solid black;
}

.child-right {
	align-items: stretch;
	float: left;
	width:468px;
	padding:10px;
}

<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

आप बच्चे को सही-सही फ्लोट कर सकते हैं, लेकिन इस मामले में मैंने प्रत्येक div की चौड़ाई की ठीक-ठीक गणना की है।

Comments

पहली बात जो मेरे दिमाग में आई, वह थी ऊँचाई: यह सुनिश्चित न करना कि किसी ने क्यों नहीं उत्थान किया

— एंड्रियास

Answer 10

अगर आपको बूटस्ट्रैप के बारे में पता है तो आप 'फ्लेक्स' प्रॉपर्टी का उपयोग करके इसे आसानी से कर सकते हैं। आपको करने की आवश्यकता है, सीएसएस गुणों के नीचे माता-पिता के लिए पास होना चाहिए

.homepageSection {
  overflow: hidden;
  height: auto;
  display: flex;
  flex-flow: row;
}

.homepageSectionमेरा माता-पिता कहां है अब अपने html में बाल div को जोड़ें

<div class="abc col-md-6">
<div class="abc col-md-6">

जहाँ abc मेरा चाइल्ड div है। आप चाइल्ड डिव के लिए बॉर्डर देकर दोनों चाइल्ड डिविजन में ऊँचाई की समानता की जाँच कर सकते हैं।

Answer 11

<div class="parent" style="height:500px;">
<div class="child-left floatLeft" style="height:100%">
</div>

<div class="child-right floatLeft" style="height:100%">
</div>
</div>

मैंने सिर्फ आइडिया देने के लिए इनलाइन स्टाइल का इस्तेमाल किया।

Answer 12

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

<div class="parent">
    <div class="assert-height invisible">
        <!-- content -->
    </div>
    <div class="shown">
        <!-- content -->
    </div>
</div>