पैरेंट div की ऊंचाई के बराबर होने के लिए आंतरिक div की ऊंचाई को कैसे लागू किया जाए, यदि पैरेंट div में "न्यूनतम-ऊंचाई" है?

निम्नलिखित उदाहरण में आंतरिक div की ऊंचाई रैपर की div की तरह नहीं है?पैरेंट div की ऊंचाई के बराबर होने के लिए आंतरिक div की ऊंचाई को कैसे लागू किया जाए, यदि पैरेंट div में "न्यूनतम-ऊंचाई" है?

Live demo here.

HTML:

<div class="wrapper"> 
    <div class="inner">Hello</div> 
    <div class="inner">Peace</div> 
</div>

सीएसएस:

.wrapper { 
    background-color: #000; 
    min-height: 100px; 
} 
.inner { 
    display: inline-block; 
    background-color: #777; 
    height: 100%; 
}

अगर मैं बदल min-height: 100px;height: 100px; लिए, तो यह ठीक लग रहा है। लेकिन, मेरे मामले में, मुझे min-height की आवश्यकता है।

स्रोत

2011-05-04 Misha Moroshko

यदि रैपर की ऊंचाई गतिशील नहीं है, तो आपको% का उपयोग करने की आवश्यकता क्यों होती है जब आंतरिक की ऊंचाई समान हो सकती है कि आपने रैपर के लिए निर्दिष्ट किया है। इसके अलावा, अगर आंतरिक 100% ऊंचा था तो उनमें से दो रैपर काम के भीतर कैसे होंगे ..? – Marty

उस साइट के लिए धन्यवाद मिशा, यह बहुत उपयोगी होगा :) – iain

@iain: क्लब में आपका स्वागत है :) –

मेरा मानना है कि इस उत्पादन आप चाहते है: http://jsfiddle.net/xhp7x/

.wrapper { 
    display: table; 
    background-color: #000; 
    height: 100px; 
    width: 100%; 
} 
.wrapper2 { 
    height: 100%; 
    display: table-row 
} 
.inner { 
    height: 100%; 
    display: inline-block; 
    background-color: #777; 
    margin-right: 10px; 
    vertical-align: top; 
}

एक दूसरे DIV wrapper2 जोड़ने के लिए था।

क्रोम और फ़ायरफ़ॉक्स पर परीक्षण किया गया।

स्रोत

2011-05-04 07:01:56 ariel

आपके उदाहरण में रैपर में 'न्यूनतम-ऊंचाई' नहीं है। –

लेकिन यह ऐसा व्यवहार करता है। छोटा पाठ रैपर को 100px पर रखता है, और लंबा टेक्स्ट – ariel

ठीक है ... लेकिन आंतरिक रैपर की ऊंचाई रैपर की ऊंचाई से कम है। मैं उन्हें बराबर होना चाहता हूं। –

आप दोनों को निर्दिष्ट करना चाहते हैं, सीएसएस heightmin-height जैसा नहीं है। आप height और min-height दोनों निर्दिष्ट करना चाहते हैं।

height = जब एक % रूप में इस्तेमाल किया, इस विंडो ऊंचाई
min-height का एक प्रतिशत है = के रूप में आप विंडो की चौड़ाई खींचें, एक %height साथ DIV जब तक यह हिट कम करने के लिए जारी रहेगा min-height
max-height = के रूप में आप विंडो बड़ी खींचें, एक %height साथ DIV को बढ़ाने के लिए जारी रहेगा जब तक यह max-height

http://jsfiddle.net/gpeKW/2/ हिट मैं सीमाओं के साथ यहां एक नमूना जोड़ दिया है।

आपकी टिप्पणी से उत्तर में थोड़ा बदलाव, आप अपने मूल सीएसएस से काफी सही हैं।

नीचे दिए गए HTML में 100px की न्यूनतम div ऊंचाई होगी। आंतरिक डीवी बढ़ने के आकार के रूप में, रैपर स्वचालित रूप से विस्तारित हो जाएगा। मैंने पहले आंतरिक class पर style विशेषता जोड़कर इसका प्रदर्शन किया है।

<html> 
<head> 
    <title>Untitled Page</title> 
    <style type="text/css"> 
     .wrapper 
     { 
      background-color: #000; 
      min-height:100px; 
     } 
     .inner 
     { 
      display: inline-block; 
      background-color: #777; 
      height: 100%; 
     } 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
     <div class="inner" style="height:200px">test</div> 
    <div class="inner">Peace</div> 
    </div> 
</body> 
</html>

स्रोत

2011-05-04 07:05:59 iain

मैंने कोशिश की लेकिन यदि आप ऊंचाई डालते हैं तो यदि 100px से बड़ी सामग्री है, तो मुझे लगता है कि यह एक पूर्व शर्त – ariel

है, उदाहरण एक अच्छा नहीं है – sandeep

आपके उदाहरण में रैपर div पर कोई 'न्यूनतम-ऊंचाई' नहीं है । –

मैं div बच्चे ऊंचाई अपनी मूल div ऊंचाई के रूप में ही माता-पिता और बच्चे के लिए निरपेक्ष स्थिति के लिए रिश्तेदार का उपयोग है स्थापित करने के लिए एक तरह से पता है।

.wrapper { 
    background-color: #000; 
    min-height: 100px; 
    position: relative; 
} 
.inner { 
    display: inline-block; 
    background-color: #777; 
    position: absolute; 
    height: 100%; 
}

लेकिन इस तरह से कुछ समस्या का कारण होगा, आप बच्चे तत्व समायोजित करना इतना है कि यह ठीक से प्रदर्शित किया जाएगा

पी/एस: क्यों आप इसे के रूप में ही ऊंचाई के लिए सेट नहीं है इसके माता पिता की ऊंचाई? मेरा मतलब है, 100% x% नहीं है ... बस सोच रहा है ..

वैसे भी, खुश कोडिंग; नहीं)

स्रोत

2011-05-04 07:19:00

एचएम .. अजीब, यह एक उच्च तत्व के लिए ऊंचाई का विस्तार नहीं किया है http://jsfiddle.net/kBRVH/ – ariel

http://jsfiddle.net/kBRVH/3/ जैसा कि आप देख सकते हैं, टेक्स्ट वाला पहला वाला काले रंग में, यदि आप अधिक रेखाएं डालते हैं, तो यह बाहरी div को बह जाएगा, क्योंकि बाहरी div 100px ऊंचा है और यह ऊंचाई तब तक नहीं बढ़ेगी जब पूर्ण स्थिति वाले बच्चे को ऊंचाई बढ़ जाती है। दूसरी ओर, सफेद पाठ वाला दूसरा, अधिक रेखाएं डालें और आप देखेंगे;) –

सीएसएस में कुछ गुण माता-पिता का मान स्वचालित रूप से वारिस, कुछ करो। जब आप इसे माता-पिता के मूल्य का उत्तराधिकारी प्राप्त करना चाहते हैं तो न्यूनतम ऊंचाई स्पष्ट रूप से वर्णित की जानी चाहिए:

min-height: inherit;

स्रोत

2012-03-30 09:11:11 mystrdat

पैरेंट div की ऊंचाई के बराबर होने के लिए आंतरिक div की ऊंचाई को कैसे लागू किया जाए, यदि पैरेंट div में "न्यूनतम-ऊंचाई" है?

उत्तर

संबंधित मुद्दे