अपने माता-पिता की 100% ऊंचाई पर एक फ्लोटेड डिव कैसे बनाएं?

Question

यहाँ HTML है:

<div id="outer">
    <div id="inner"></div>
    Test
</div>

और यहाँ सीएसएस है:

#inner {
  float: left;
  height: 100%;
}

Chrome डेवलपर टूल के साथ निरीक्षण करने पर, आंतरिक div को 0px की ऊंचाई मिल रही है।

मैं इसे पैरेंट डिव की ऊंचाई का 100% होने के लिए कैसे मजबूर कर सकता हूं?

Comments

तो आप बाहरी डिव में पाठ चाहते हैं (इनर डिव में नहीं), लेकिन फ्लो इनर डिव बाहरी आउटर की ऊंचाई होना चाहिए?

— edl

अंतिम परिणाम क्या आप प्राप्त करने की कोशिश कर रहे हैं? मुझे लगता है कि मेरी उलझन इस बात में है कि अगर आंतरिक div बाहरी और बाहरी पाठ जितना ऊंचा है, तो क्या यह आंतरिक div में पाठ के समान नहीं है?

— edl

@edl: हाँ, यह :) कारण है कि मैं इसे इस तरह से चाहता हूं कि आंतरिक पृष्ठभूमि में इसकी पृष्ठभूमि के रूप में एक छवि है। पाठ को इसके बगल में होना चाहिए। दोनों को बाहरी div के अंदर होना चाहिए क्योंकि इसकी पृष्ठभूमि छवि भी है।

— नाथन उस्मान

इसके अलावा stackoverflow.com/questions/1122381

— चाडविक

इस सवाल का जवाब देखना और कोशिश करना सिर्फ निराशाजनक था।

— इटरनहॉर

Answer 1

के लिए #outerऊंचाई इसकी सामग्री के आधार पर किया जाना है, और है #innerआधार है कि पर उसकी ऊंचाई, दोनों तत्वों को पूरी तरह से तैनात हैं।

अधिक जानकारी सीएसएस ऊंचाई संपत्ति के लिए कल्पना में पाया जा सकता है है, लेकिन अनिवार्य रूप से, #innerउपेक्षा करना चाहिए #outerअगर ऊंचाई #outerकी ऊंचाई है auto, जब तक कि #outer पूरी तरह से स्थिति में है। तब तक #innerऊंचाई 0 होगी, जब तक कि #inner खुद को पूरी तरह से तैनात नहीं किया जाता है।

<style>
    #outer {
        position:absolute; 
        height:auto; width:200px; 
        border: 1px solid red; 
    }
    #inner {
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer'>
    <div id='inner'>
    </div>
    text
</div>

हालाँकि ... #innerपूरी तरह से स्थिति से, एक floatसेटिंग को अनदेखा किया जाएगा, इसलिए आपको #innerस्पष्ट रूप से एक चौड़ाई चुनने की आवश्यकता होगी , और #outerपाठ को नकली करने के लिए पैडिंग को जोड़ना होगा जिसमें मुझे संदेह है कि आप चाहते हैं। उदाहरण के लिए, नीचे, की पैडिंग +3 #outerकी चौड़ाई है #inner। आसानी से (जैसा कि पूरे बिंदु #innerको 100% ऊंचाई मिलनी थी ) पाठ के नीचे लपेटने की कोई आवश्यकता नहीं है #inner, इसलिए यह ठीक वैसे ही दिखेगा जैसे कि #innerयह तैरता है।

<style>
    #outer2{
        padding-left: 23px;
        position:absolute; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2{
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
   }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
    text
</div>

मैंने अपना पिछला उत्तर हटा दिया, क्योंकि यह आपके लक्ष्य के बारे में बहुत सारी गलत धारणाओं पर आधारित था।

Comments

हम्म .. सवाल फ्लोटेड डिव का था। आपने बिल्कुल स्थिति divs के बारे में उत्तर दिया

— Mihkel L।

मैं कभी भी आश्चर्यचकित नहीं होता कि HTML/CSS

— इन्सान की

हार्डकोडिंग चौड़ाई के बिना ऐसा करने का कोई तरीका? उत्तरदायी कंटेनरों के लिए महान नहीं है।

— जेक विल्सन

मुझे नहीं पता कि इसे क्यों स्वीकार किया गया और कितना बढ़ा। प्रश्न फ्लोटेड डिव्स के बारे में है, जो मुझे अपनी खोज से यहां लाए हैं, और इसके बजाय यह बिल्कुल पोस्ट किए गए डिव का जवाब देता है।

— मैट के

कैसे एक अस्थायी कंटेनर बनाने के लिए खड़ी है यह कंटेनर है? अब और नहीं बनाकर! Haha। अच्छी कोशिश, और वास्तव में उपयोगी माना जाने के लिए पर्याप्त है।

— रॉल्फ

Answer 2

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

display: flex;

आपको कुछ उपसर्ग जोड़ने चाहिए http://css-tricks.com/using-flexbox/

संपादित करें: केवल दोष यह है कि IE हमेशा की तरह है, IE9 फ्लेक्स का समर्थन नहीं करता है। http://caniuse.com/flexbox

संपादित करें 2: जैसा कि @toddsby ने कहा, संरेखित आइटम माता-पिता के लिए है, और इसका डिफ़ॉल्ट मूल्य वास्तव में खिंचाव है । यदि आप बच्चे के लिए एक अलग मूल्य चाहते हैं, तो संरेखित-स्व संपत्ति है।

संपादन 3: jsFiddle: https://jsfiddle.net/bv71tms5/2/

Comments

आपको इंगित करना चाहिए कि यह केवल आधुनिक ब्राउज़रों में काम करता है, और तब भी विक्रेता उपसर्गों की आवश्यकता होती है।

— कोंतुर k ’

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

— ल्यूक

यहीं जवाब है। IE9 जल्द ही बाहर हो जाएगा, साथ ही इसे एक अच्छा, ठोस किक देकर मदद कर सकता है। यह समाधान बहुत अच्छा, सरल और आसान है ... मैं एक साथ वैकल्पिक समाधान हैकिंग कर रहा हूं। ;)

— जिरस्ता

फ्लेक्सबॉक्स के लिए सबसे हालिया युक्ति के अनुसार: w3.org/TR/css-flexbox-1/#align-items-property देखें । align-items: stretch;यह आवश्यक नहीं है क्योंकि यह डिफ़ॉल्ट मान है। इसके अलावा यह माता-पिता पर परिभाषित किया जाना चाहिए कि बच्चा नहीं है।

— टॉडडबी

जवाब में बेला जोड़ा गया। @ टाइगरन

— ऐपेह

Answer 3

दरअसल, जब तक मूल तत्व को तैनात किया जाता है, तब तक आप बच्चे की ऊंचाई 100% तक निर्धारित कर सकते हैं। अर्थात्, यदि आप चाहते हैं कि माता-पिता बिल्कुल तैनात न हों। मुझे आगे समझाएं:

<style>
    #outer2 {
        padding-left: 23px;
        position: relative; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2 {
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
</div>

Comments

कूल, यह चाडविक की आवश्यकता से कम सीमित है position:absolute(जो एक साइट की शैलियों में हस्तक्षेप कर सकता है)

— हेनरी

यह सिर्फ मैं हो सकता है, लेकिन मुझे समस्या है अगर साइडबार सामग्री से बड़ा है। एक पृष्ठभूमि रंग मूल कंटेनर पर बंद हो जाएगा, लेकिन साइडबार सामग्री माता-पिता के बाहर बह जाएगी।

— हाउडी_मसीजी

यह एक अधिक लचीला समाधान है, और यहां तक ​​कि अगर आपके पास कई फ्लोट किए गए बाल तत्व हैं, तो यह उनके ऑफसेट को पूरी तरह से तैनात करने के लिए एक स्वीकार्य दोष लगता है। +1

— कोंटूर

आपका बहुत- बहुत धन्यवाद । मैंने SO पर एक अन्य प्रश्न के उत्तर के रूप में अपना विशिष्ट समाधान पोस्ट किया है: stackoverflow.com/a/31749164/84661 ।

— ब्रायन हक

Answer 4

जब तक आपको IE8 से पहले इंटरनेट एक्सप्लोरर के संस्करणों का समर्थन करने की आवश्यकता नहीं है, तब तक आप इसे display: table-cellपूरा करने के लिए उपयोग कर सकते हैं :

HTML:

<div class="outer">
    <div class="inner">
        <p>Menu or Whatever</p>
    </div>
    <div class="inner">
        <p>Page contents...</p>
    </div>
</div>

सीएसएस:

.inner {
    display: table-cell;
}

यह .innerकक्षा के साथ प्रत्येक तत्व को उसके मूल तत्व की पूरी ऊंचाई पर कब्जा करने के लिए मजबूर करेगा ।

Comments

हालांकि यह काम करेगा, यह एक मार्जिन नहीं दिखाएगा, भले ही आप एक निर्दिष्ट करें। यदि आप कोई मार्जिन निर्दिष्ट करना चाहते हैं तो यह समाधान विफल हो जाएगा। आप पैडिंग को काम के इर्द-गिर्द असाइन कर सकते हैं, लेकिन अगर आपको मार्जिन की आवश्यकता है (और पैडिंग नहीं है) तो आप इसे कैसे हल करेंगे?

— डेवनर

क्या मुझसे कोई चूक हो रही है? आपका प्रश्न एक फ़्लोट किए गए तत्व के लिए पूछता है जिसकी ऊँचाई 100% है। जब फ्लोट किया जाता है, तो कोई display: table-cell;तत्व उसके कंटेनर की ऊंचाई को और अधिक नहीं भरता है? मुझे कुछ याद आ रहा है, क्योंकि यह आपका अपना सवाल है ...?

— user56reinstatemonica8

Answer 5

मैंने एक उदाहरण दिया आपकी समस्या का समाधान करते हुए ।

आपको एक आवरण बनाना है, इसे फ्लोट करना है, फिर अपनी div को पूर्ण स्थिति दें और इसे 100% ऊंचाई दें।

एचटीएमएल

<div class="container">
    <div class="left">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div>
  <div class="right-wrapper">
    <div class="right">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </div>
  </div>
  <div class="clear">&nbsp;</div>
</div>

सीएसएस:

.container {
    width: 100%;
    position:relative;
}
.left {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.6);
    float: left;
}
.right-wrapper {
    width: 48%;
    float: left;
}
.right {
    height: 100%;
    position: absolute;
}

स्पष्टीकरण: .right div बिल्कुल स्थिति है। इसका मतलब है कि इसकी चौड़ाई और ऊंचाई, और शीर्ष और बाईं स्थिति की गणना पहले माता-पिता के आधार पर की जाएगी बिल्कुल या केवल रिश्तेदार तैनात यदि सीएसएस में चौड़ाई या ऊंचाई के गुण स्पष्ट रूप से घोषित किए गए हों; यदि वे घोषित नहीं किए गए हैं, तो उन गुणों की गणना मूल कंटेनर (.right-आवरण) के आधार पर की जाएगी।

तो, DIV की 100% ऊँचाई की गणना .container की अंतिम ऊंचाई के आधार पर की जाएगी, और अंतिम स्थिति की सही स्थिति की गणना मूल कंटेनर के आधार पर की जाएगी।

Comments

यह उन स्थितियों के लिए एक ठोस समाधान है जिसमें आप यह गारंटी दे सकते हैं कि .rightकॉलम की सामग्री कॉलम की सामग्री से छोटी .leftहै। उदाहरण के लिए, यदि आप इसका उपयोग किसी ऐसे घटक पर कर रहे हैं जिसमें .leftस्तंभ में कुछ भिन्न आकार की सामग्री है और दायाँ स्तंभ केवल एक तीर को एक विस्तृत पृष्ठ पर प्रदर्शित करता है तो यह समाधान अच्छी तरह से काम करता है। उस के लिए +1

— ज़ाचरी न्येबेल

Answer 6

यहाँ इसे प्राप्त करने का एक सरल तरीका है:

1. तीन तत्वों के कंटेनर (# राउटर) डिस्प्ले: टेबल सेट करें
2. और तत्वों को स्वयं (# बैनर) डिस्प्ले: टेबल-सेल सेट करें
3. फ्लोटिंग को हटा दें।
4. सफलता।

#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}

100% ऊंचाई पर फ्लोटेड डिव @ @ay का धन्यवाद

Answer 7

यदि आप थोड़ा jQuery का उपयोग करने के लिए तैयार हैं, तो इसका उत्तर सरल है!

$(function() {
    $('.parent').find('.child').css('height', $('.parent').innerHeight());
});

यह एक ही तत्व को एक तरफ तैराने के लिए अच्छी तरह से काम करता है, इसकी 100% ऊंचाई माता-पिता के साथ होती है, जबकि अन्य फ्लोटेड तत्व जो सामान्य रूप से चारों ओर लपेटते हैं, उन्हें एक तरफ रखा जाता है।

आशा है कि यह साथी jQuery के प्रशंसकों की मदद करता है।

Comments

यह इस लेआउट समस्या पर जावास्क्रिप्ट फेंकने के लिए overkill लगता है।

— कण्टूर k

कोई है जो IE में विकसित करने के लिए कर रहा है: धन्यवाद!

— रूक

थोड़ा ओवरकिल शायद, लेकिन यह एक सुंदर जवाब है, धन्यवाद!

— मार्टिन

मैं मानता हूं कि जेएस के बिना सभी स्थिति की समस्याओं को हल किया जाना चाहिए।

— माइकललकोव

JS और jQuery

— ViliusL

Answer 8

यह समान ऊंचाई वाली ग्रिड प्रणाली के लिए एक कोड नमूना है।

#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}

ऊपर बाहरी div के लिए सीएसएस है

#inner{
width: 20%;
float: left;
border: 1px solid;
}

ऊपर का आंतरिक भाग है

आशा है कि यह आपकी मदद करेगा

Answer 9

इससे मुझे मदद मिली।

#outer {
    position:relative;
}
#inner {
    position:absolute;
    top:0;
    left:0px;
    right:0px;
    height:100%;
}

दाएं बदलें: और बाएं: बेहतर प्राथमिकता # सेट करने के लिए।

Answer 10

इसी तरह का मामला जब आपको कई बाल तत्वों की आवश्यकता होती है, तो समान ऊंचाई को फ्लेक्सबॉक्स के साथ हल किया जा सकता है:

https://css-tricks.com/using-flexbox/

display: flex;माता-पिता के लिए और flex: 1;बच्चे के तत्वों के लिए सेट करें , उन सभी की ऊंचाई समान होगी।

Answer 11

प्रयत्न

#outer{overflow: auto;}

में और अधिक विकल्प दिखाएँ: आप अस्थायी तत्वों के माता-पिता को ढहने से कैसे बचाते हैं?

Comments

"अतिप्रवाह: छिपा हुआ" विकल्प बेहतर काम करने लगता है क्योंकि इसमें लुढ़कने का कोई मौका नहीं है ...

— रोड्रिगो बैरेइरो

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

— डोनाल्ड डक