न्यूनतम ऊंचाई वाले माता-पिता के अंदर का बच्चा: 100% विरासत में नहीं मिली

Question

मुझे सेटिंग करके, पृष्ठ की कम से कम पूर्ण ऊंचाई पर कब्जा करने के लिए एक डिव कंटेनर बनाने का एक तरीका मिला min-height: 100%;। हालांकि, जब मैं एक नेस्टेड डिव और सेट जोड़ता हूं height: 100%;, तो यह कंटेनर की ऊंचाई तक नहीं फैलता है। क्या इसे ठीक करने का कोई तरीका है?

html, body {
  height: 100%;
  margin: 0;
}

#containment {
  min-height: 100%;
  background: pink;
}

#containment-shadow-left {
  height: 100%;
  background: aqua;
}

<div id="containment">
  <div id="containment-shadow-left">
    Hello World!
  </div>
</div>

Comments

आधुनिक दिन समाधान: कंटेनर दे display:flexऔर flex-direction:columnऔर बच्चे दे flex:1।

— जैकोक्रान

@jackocnr बग के कारण किसी भी IE में काम नहीं करता है , यह एज में तय किया गया था।

— स्टिकर

Answer 1

यह एक रिपोर्ट की गई वेबकिट (क्रोम / सफारी) बग है, न्यूनतम ऊंचाई वाले माता-पिता के बच्चे ऊंचाई की संपत्ति प्राप्त नहीं कर सकते हैं: https://bugs.webkit.org/show_bug.cgi?id=26559

जाहिरा तौर पर फ़ायरफ़ॉक्स भी प्रभावित होता है (फिलहाल IE में परीक्षण नहीं कर सकता)

संभव समाधान:

• स्थिति जोड़ें: # संबंध के सापेक्ष
• स्थिति जोड़ें: # सम्‍मिलित-छाया-बाएँ पूर्ण

बग तब नहीं दिखता जब आंतरिक तत्व में पूर्ण स्थिति होती है।

Http://jsfiddle.net/xrebB/ देखें

10 अप्रैल 2014 को संपादित करें

चूंकि मैं वर्तमान में एक परियोजना पर काम कर रहा हूं जिसके लिए मुझे वास्तव में माता-पिता कंटेनरों की आवश्यकता है min-height, और बाल तत्वों को कंटेनर की ऊंचाई विरासत में मिली, मैंने कुछ और शोध किए।

पहला: मुझे अब यकीन नहीं है कि वर्तमान ब्राउज़र व्यवहार वास्तव में बग है या नहीं। CSS2.1 चश्मा कहते हैं:

प्रतिशत की गणना जनरेट किए गए बॉक्स वाले ब्लॉक की ऊंचाई के संबंध में की जाती है। यदि युक्त ब्लॉक की ऊंचाई स्पष्ट रूप से निर्दिष्ट नहीं है (यानी, यह सामग्री ऊंचाई पर निर्भर करता है), और यह तत्व बिल्कुल तैनात नहीं है, तो मान 'ऑटो' के लिए गणना करता है।

यदि मैं अपने कंटेनर पर एक मिनट की ऊँचाई डालता हूं, तो मैं स्पष्ट रूप से इसकी ऊंचाई निर्दिष्ट नहीं कर रहा हूं - इसलिए मेरे तत्व को autoऊंचाई मिलनी चाहिए । और ठीक यही वेबकिट - और अन्य सभी ब्राउज़र - करते हैं।

दूसरा, मुझे जो वर्कअराउंड मिला है:

अगर मैं इसके display:tableसाथ अपना कंटेनर तत्व सेट करता हूं तो height:inheritयह ठीक उसी तरह काम करता है जैसे कि मैं इसे min-height100% देता हूं । और - इससे भी महत्वपूर्ण बात यह है कि अगर मैंने बाल तत्व को display:table-cellइसमें सेट किया है , तो कंटेनर तत्व की ऊंचाई पूरी तरह से प्राप्त होगी - चाहे वह 100% या अधिक हो।

पूर्ण सीएसएस:

html, body {
  height: 100%;
  margin: 0;
}

#container {
  background: green;
  display: table;
  height: inherit;
  width: 100%;
}

#content {
  background: red;
  display: table-cell;
}

मार्कअप:

<div id="container">
  <div id="content">
      <p>content</p>
  </div>
</div>

Http://jsfiddle.net/xrebB/54/ देखें ।

Comments

यार, यह अभी भी तय नहीं है: S

— Mrrņ B Briedis

हाँ, यह नहीं है - मैं देख रहा हूँ कि कुछ पैच हैं, लेकिन क्रोम 29 के रूप में, यह अभी भी अपेक्षित व्यवहार प्रदर्शित नहीं कर रहा है। हालाँकि, यह फ़ायरफ़ॉक्स 23, IE 10, सफारी 5 या ओपेरा 12 में काम नहीं करता है। कम से कम सभी ब्राउज़र्स सहमत ...

— पॉल डी'अवेट

इसका निष्कर्ष यह है कि मिनट- / अधिकतम ऊंचाई स्पष्ट नहीं है ... और अजीब से मेरा मतलब गलत है। पूरे पैराग्राफ को पढ़ना, संदर्भ में, यह व्याख्या गलत है। यह स्पष्ट करने के लिए कि, "युक्त ब्लॉक की ऊंचाई," संदर्भ में, शब्दशः अलग है तो ऊंचाई संपत्ति। यदि इसके बजाय, फिएटसिंग "ब्लॉकिंग की ऊंचाई संपत्ति " थी, तो आपकी व्याख्या समझ में आएगी (और कल्पना में एक बग हो सकती है)।

— व्रिठकनी

यह 2019 है। हमने इस बग की 10 साल की सालगिरह को याद किया है। फ्लेक्स सॉल्यूशन ने मेरे लिए काम किया stackoverflow.com/questions/8468066/…

— Ilya Chernov

मैं लॉकडाउन युग से हूँ

— डेविड कॉलनान

Answer 2

height: 1pxमूल कंटेनर में जोड़ें । क्रोम, एफएफ, सफारी में काम करता है।

Comments

ऐसा करने से समस्या का समाधान नहीं होता है, प्रभावी रूप से आप न्यूनतम ऊंचाई को पार कर रहे हैं: 100% सेटिंग जो कुछ भी हासिल नहीं करती है जो ऊंचाई के साथ हासिल नहीं किया जा सकता है: 100% जो ओपी चाहता है वह नहीं है

— स्टाइलर

@styler जोड़ने height: 1px;से मिनट की ऊंचाई ओवरराइड नहीं होगी। काफी विपरीत। यह यहां सबसे अच्छा समाधान है ... डेमो: jsbin.com/mosaboyo/1/edit

— jjenzz

क्यों के लिए इस देखें height: 1px;काम करता है stackoverflow.com/questions/2341821/height100-vs-min-height100

— बेन अलावी

@jjenzz इसके साथ समस्या, जो मुझे लगता है कि स्टाइलर को पाने की कोशिश कर रहा था, यह है कि यह विस्तार के गुण को बरकरार नहीं रखता है min-height। उदाहरण के लिए, यदि पर्याप्त पाठ है तो यह ओवरफ्लो हो जाएगा। देखें jsbin.com/vuyapitizo/1

— binaryfunt

नीचे पॉल की टिप्पणी का हवाला देते हुए: "लेकिन यह कंटेनर को बढ़ने की अनुमति नहीं देता है, जो न्यूनतम ऊंचाई का उपयोग करने के उद्देश्य को पराजित करता है।" stackoverflow.com/questions/8468066/…

— सिंह लेई

Answer 3

मैंने सोचा कि मैं इसे साझा करूंगा, जैसा कि मैंने कहीं भी नहीं देखा, और यही वह है जो मैंने अपने समाधान को ठीक करने के लिए इस्तेमाल किया।

समाधान :min-height: inherit;

मेरे माता-पिता एक निर्दिष्ट न्यूनतम ऊंचाई के साथ थे, और मुझे उस ऊंचाई के लिए भी एक बच्चे की आवश्यकता थी।

.parent {
  min-height: 300px;
  background-color: rgba(255,255,0,0.5); //yellow
}

.child {
  min-height: inherit;
  background-color: rgba(0,255,0,0.5); //blue
}

p {
  padding: 20px;
  color: red;
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
}

<div class="parent">
  <div class="child">
    <p>Yellow + Blue = Green :)</p>
  </div>
</div>

इस तरह बच्चा अब न्यूनतम ऊंचाई के 100% के रूप में कार्य करता है।

मुझे आशा है कि कुछ लोगों को यह उपयोगी लगता है :)

Comments

आंशिक रूप से काम करता है, लेकिन बच्चा केवल विरासत में मिला है min-height। जब माता-पिता का कद बड़ा होता है, तो बच्चे का विस्तार नहीं होगा।

— ओगुज़ेगल

आपने मेरी जान बचाई

— कैसामिया

यह केवल तभी काम करता है जब न्यूनतम ऊंचाई निरपेक्ष हो, प्रतिशत नहीं, AFAICS।

— बेंजामिन

यदि माता-पिता का vh मूल्य है तो भी ठीक काम करता है! धन्यवाद!

— user1658080

हर स्थिति के लिए उपयुक्त नहीं लेकिन कभी-कभी बहुत मददगार। धन्यवाद!

— Blackbam

Answer 4

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

यह आंतरिक तत्व पूरे कंटेनर को भरता है यदि यह बहुत छोटा है, लेकिन कंटेनर की ऊंचाई को बढ़ाता है यदि यह बहुत बड़ा है।

#containment {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#containment-shadow-left {
  flex: 1;
}

Comments

यह सबसे अच्छा है क्योंकि फ्लेक्सबॉक्स व्यापक रूप से संगत है।

— जोस कार्लोस रामिरेज़ वास्केज़

Answer 5

कुशाग्र गौर का समाधान काम करता है (कम से कम क्रोम और आईई में) और मूल समस्या को हल किए बिना उपयोग करता है display: table;और display: table-cell;। प्लंकर देखें: http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU

min-height: 100%; height: 1px;बाहरी div पर सेट करने से इसकी वास्तविक ऊंचाई कम से कम 100% हो सकती है, आवश्यकतानुसार। यह आंतरिक div को सही ढंग से ऊंचाई प्राप्त करने की अनुमति देता है।

Comments

लेकिन यह कंटेनर को बढ़ने नहीं देता है, जो न्यूनतम ऊंचाई का उपयोग करने के उद्देश्य को पराजित करता है।

— साल

मुझे माता-पिता की न्यूनतम ऊंचाई और ऊंचाई को भरने के लिए एक आवरण की आवश्यकता थी। मेरे लिए जो काम किया गया था, वह विरासत और ऊंचाई को 100% करने के लिए न्यूनतम ऊंचाई निर्धारित कर रहा था।

— मिस्टर डहार्ट

Answer 6

मौजूदा उत्तरों के अलावा, vhउपयोग करने के लिए व्यूपोर्ट इकाइयाँ भी हैं। नीचे सरल स्निपेट। बेशक यह एक साथ इस्तेमाल किया जा सकता है calc(), उदाहरण के लिए min-height: calc(100vh - 200px);जब पृष्ठ हैडर और पाद 200pxएक साथ ऊंचाई है।

body {
  margin: 0;
}

.child {
  min-height: 100vh;
  background: pink;
}

<div class="parent">
  <div class="child"></div>
</div>

Answer 7

मेरा मानना ​​है कि यह ब्राउज़र के साथ एक बग है। सभी एक ही तरह से व्यवहार करते हैं - अर्थात, एक बार जब आप स्पष्ट ऊंचाइयों को निर्दिष्ट करना बंद कर देते हैं, तो न्यूनतम ऊंचाई मूल रूप से एक "अंतिम चरण" है।

ऐसा प्रतीत होता है कि CSS 2.1 युक्ति कैसे बताती है: http://www.w3.org/TR/CSS2/visudet.html#the-height-property

प्रतिशत की गणना जनरेट किए गए बॉक्स वाले ब्लॉक की ऊंचाई के संबंध में की जाती है। यदि युक्त ब्लॉक की ऊंचाई स्पष्ट रूप से निर्दिष्ट नहीं है (यानी, यह सामग्री ऊंचाई पर निर्भर करता है), और यह तत्व बिल्कुल तैनात नहीं है, तो मान 'ऑटो' के लिए गणना करता है।

इसलिए, जैसा कि min-heightमाता-पिता के पास स्पष्ट नहीं हैheight संपत्ति सेट नहीं है, यह ऑटो के लिए चूक है।

संभवतः इसका उपयोग करके कुछ तरीके हैं display: table-cell, या नई शैली जैसे फ्लेक्सबॉक्स, यदि यह आपके लक्षित दर्शकों के ब्राउज़रों के लिए संभव है। आप इसे कुछ स्थितियों में एक पूरी तरह से तैनात आंतरिक तत्व पर गुणों topऔर bottomगुणों का उपयोग करके भी हटा सकते हैं , जो आपको निर्दिष्ट किए बिना 100% ऊंचाई देता है।

Answer 8

यद्यपि display: flex;यहां सुझाव दिया गया है, display: grid;अब उपयोग करने पर विचार करें कि यह व्यापक रूप से समर्थित है । डिफ़ॉल्ट रूप से, एक ग्रिड का एकमात्र बच्चा अपने माता-पिता को पूरी तरह से भर देगा।

html, body {
  height: 100%;
  margin: 0;
  padding: 0; /* Don't forget Safari */
}

#containment {
  display: grid;
  min-height: 100%;
  background: pink;
}

#containment-shadow-left {
  background: aqua;
}

Answer 9

गोगलर्स के लिए:

यह jquery- वर्कअराउंड बनाता है #contain अपने आप एक ऊंचाई प्राप्त करता है (द्वारा, ऊंचाई: ऑटो), फिर पिक्सेल मान के रूप में निर्दिष्ट वास्तविक ऊंचाई प्राप्त करता है।

<script type="text/javascript">
<!--
    $(function () {

        // workaround for webkit-bug http://stackoverflow.com/a/8468131/348841

        var rz = function () {
            $('#containment')
            .css('height', 'auto')
            .css('height', $('#containment').height() + 'px');
        };

        $(window).resize(function () {
            rz();
        });

        rz();

    })
-->
</script>

Comments

अच्छा वर्कअराउंड, आप बस 'ऑटो' की ऊंचाई निर्धारित किए बिना, तत्व की न्यूनतम ऊंचाई निर्धारित कर सकते हैं। इसने मेरे लिए काम किया।

— साल्वातोर जैपला

Answer 10

आजकल इसे प्राप्त करने का सबसे अच्छा तरीका उपयोग करना है display: flex;। हालाँकि आप IE11 का समर्थन करने का प्रयास करते समय किसी समस्या में भाग सकते हैं। Https://caniuse.com के अनुसार flexbox का उपयोग करना:

जब ऊंचाई का उपयोग किया जाता है तो IE 11 लंबवत रूप से आइटम को सही ढंग से संरेखित नहीं करता है

इंटरनेट एक्सप्लोरर संगत समाधान

समाधान display: table;माता-पिता और display: table-row;बच्चे पर दोनों के height: 100%;लिए एक प्रतिस्थापन के रूप में उपयोग करना हैmin-height: 100%; ।

यहां सूचीबद्ध अधिकांश समाधान उपयोग करते हैं display: table, table-rowऔर / या table-cell, लेकिन वे उसी व्यवहार को दोहराते नहीं हैं min-height: 100%;, जो है:

• माता-पिता की गणना की गई ऊँचाई को इनहेरिट करें (जैसा कि इसे विरासत में मिला है height संपत्ति );
• माता-पिता की ऊंचाई को इसके पार करने की अनुमति दें min-height;

इस समाधान का उपयोग करते समय, व्यवहार समान है और संपत्ति min-heightकी आवश्यकता नहीं है जो बग के आसपास प्राप्त करने की अनुमति देता है।

व्याख्या

इसका कारण यह है कि काम करता है, क्योंकि अधिकांश तत्वों के विपरीत, तत्वों का उपयोग करना display: tableऔर table-rowहमेशा उनकी सामग्री के समान लंबा होगा। यह उनकी heightसंपत्ति के समान व्यवहार करता है min-height।

कार्रवाई में समाधान

html, body {
  height: 100px;
  margin: 0;
}

#containment {
  display: table;
  height: 100%;
  background: pink;
  width: 100%;
}

#containment-shadow-left {
  display: table-row;
  height: 100%;
  background: aqua;
}

#content {
  padding: 15px;
}

#demo {
  display: none;
  background-color: red;
  height: 200px;
}

#demo-checkbox:checked ~ #demo {
  display: block;
}

<div id="containment">
  <div id="containment-shadow-left">
    <div id="content">
      <input id="demo-checkbox" type="checkbox">
      <label for="demo-checkbox">Click here for overflow demo</label>
      <div id="demo">This is taller than #containment</div>
    </div>
  </div>
</div>

Answer 11

एक अन्य JS समाधान, जो आसान है और इसका उपयोग गैर-आसान CSS-only या अतिरिक्त मार्कअप / हैकी समाधान से बचने के लिए किया जा सकता है।

function minHeight(elm, percent) {
  var windowHeight = isNaN(window.innerHeight) ? 
                     window.clientHeight : window.innerHeight;
  var height = windowHeight * percent / 100;
  elm.style.minHeight = height + 'px';
}

डब्ल्यू / jQuery:

function minHeight($elm, percent) {
  var windowHeight = $(window).height();
  var height = windowHeight * percent / 100;
  $elm.css('min-height', height + 'px');
}

कोणीय निर्देश:

myModule.directive('minHeight', ['$window', function($window) {
  return {
    restrict: 'A',
    link: function(scope, elm, attrs) {
      var windowHeight = isNaN($window.innerHeight) ? 
               $window.clientHeight : $window.innerHeight;
      var height = windowHeight * attrs.minHeight / 100;
      elm.css('min-height', height + 'px');
    }
  };
}]);

इस तरह इस्तेमाल किया जाना है:

<div>
  <!-- height auto here -->
  <div min-height="100">
    <!-- This guy is at least 100% of window height but grows if needed -->
  </div>
</div>

Comments

निर्देश समाधान के लिए धन्यवाद। यही कारण है कि मैं का उपयोग कर समाप्त हो गया, लेकिन मैं नहीं चाहता था कि खिड़की की ऊंचाई न्यूनतम हो; बल्कि मैं माता-पिता की न्यूनतम ऊंचाई प्राप्त करना चाहता था, इसलिए मैंने इस कोड को बदल दिया: var height = elm.parent () [0] .offsetHeight;

— सैल

Answer 12

यह आमतौर पर मेरे लिए काम करता है:

.parent {
  min-height: 100px;
  background-color: green;
  display: flex;
}
.child {
  height: inherit;
  width: 100%;
  background-color: red;
}

<!DOCTYPE html>
<html>
  <body>
    <div class="parent">
      <div class="child">
      </div>
    </div>
  </body>
</html>

Answer 13

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

कोई अतिप्रवाह नहीं

html, body, .wrapper, .parent, .child {
  position: fixed;
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 100%;
}

.child {
  overflow: auto;
  background: gray;
}

.height-50 {
  height: 50%;
  width: 5em;
  margin: 10px auto;
  background: cyan;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
      
      <div class="height-50"></div>
      
    </div>
  </div>
</div>

ओवरफ्लो के साथ

html, body, .wrapper, .parent, .child {
  position: fixed;
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 100%;
}

.child {
  overflow: auto;
  background: gray;
}

.height-150 {
  height: 150%;
  width: 5em;
  margin: 10px auto;
  background: cyan;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
      
      <div class="height-150"></div>
      
    </div>
  </div>
</div>

Answer 14

यह वही है जो मेरे लिए प्रतिशत-आधारित ऊंचाई के साथ काम करता है और माता-पिता अभी भी बच्चों की ऊंचाई के अनुसार बढ़ रहे हैं। फ़ायरफ़ॉक्स, क्रोम और सफारी में ठीक काम करता है।

.parent {
  position: relative;
  min-height: 100%;
}

.child {
  min-height: 100vh;
}

<div class="parent">
    <div class="child"></div>
  </div>

Answer 15

हमारे लिए कोशिश करने के बाद! क्रोम समझता है कि मैं चाहता हूं कि जब मैं इनलाइन ब्लॉक में डिस्प्ले वैल्यू सेट करूं तो चाइल्ड एलिमेंट 100% ऊंचाई का हो। btw सेटिंग फ्लोट यह कारण होगा।

display:inline-block

अपडेट करें

ये काम नहीं कर रहा है। इसका समाधान पेरेंटोड ऑफसेट को प्राप्त करना है और इसे जावास्क्रिप्ट के साथ पृष्ठ के पृष्ठ पर और इसका उपयोग करना है।

<script>
    SomedivElement = document.getElementById('mydiv');
    SomedivElement.style.height = String(nvleft.parentNode.offsetHeight) + 'px';    
</script>