मैं अपने जीवन के लिए एक कंटेनर के साथ एक साधारण पृष्ठ बनाने की कोशिश कर रहा हूं जो नीचे तक फैला हुआ है। वांछित परिणाम:

  1. #Main कम से कम व्यूपोर्ट जितना लंबा है, लेकिन अगर सामग्री जोड़ दी जाए तो यह आगे बढ़ सकता है।
  2. body कम से कम व्यूपोर्ट जितना लंबा है, लेकिन अगर सामग्री जोड़ दी जाए तो यह आगे बढ़ सकता है।
  3. html कम से कम व्यूपोर्ट जितना लंबा है, लेकिन अगर सामग्री जोड़ दी जाए तो यह आगे बढ़ सकता है।

मुझे नहीं पता कि यह असंभव क्यों प्रतीत होता है। मैंने ऊंचाई, न्यूनतम-ऊंचाई इत्यादि के हर संयोजन की कोशिश की है, लेकिन वे सभी किसी न किसी तरह से असफल हो जाते हैं। <body> के बारे में कुछ ऐसा है जहां min-height काम नहीं करता।

यहाँ एक बेला है: https://jsfiddle.net/r51tvu2b/

ध्यान दें कि body, min-height: 100% घोषणा का सम्मान नहीं कर रहा है। मैं अभी कल्पना से परे चिड़चिड़ी हूं।

नोट: मुझे ऐसे समाधान मिले हैं जो "काम" करते हैं, लेकिन जब सामग्री जोड़ी जाती है तो body व्यूपोर्ट की ऊंचाई 100% पर बनी रहती है, जो वांछित परिणाम नहीं है। यही है, मेरी पहेली में, लाल रेखा को व्यूपोर्ट के नीचे तक बढ़ाया जाना चाहिए, और यदि सामग्री लंबी है, तो सामग्री के नीचे तक।

0
JS_Riddler 7 अक्टूबर 2019, 06:04
1
का संभावित डुप्लिकेट % ऊंचाई विरासत में नहीं मिली है
 – 
Tyler Roper
7 अक्टूबर 2019, 06:11
तो क्या आप कह रहे हैं कि यह संभव नहीं है? संभव डुप्लिकेट WRT, यह व्यूपोर्ट ऊंचाई पर शरीर की ऊंचाई रखता है - यानी, लाल रेखा मेरी पहेली पर नीचे नहीं जाएगी।
 – 
JS_Riddler
7 अक्टूबर 2019, 06:13
HTML एलिमेंट पर min-height करने के बजाय, बस इसे height से 100% पर सेट करें और इसे काम करना चाहिए। कम से कम jsfiddle में। यह सिर्फ सैंडबॉक्स की वजह से हो सकता है, हालांकि यह अंदर है।
 – 
Jesse
7 अक्टूबर 2019, 06:13
यहाँ मुख्य शब्द 'प्रतिशत' है। 100% क्या? ऊंचाई प्राप्त करने में सक्षम होने के लिए आपको एक निश्चित ऊंचाई वाले पूर्वजों की आवश्यकता है। यदि आप एक पूर्ण-ऊंचाई <body> बनाना चाहते हैं, तो आप 100vh (व्यूपोर्ट की ऊंचाई का 100%) चाहते हैं। साथ ही, उस मामले के लिए, आप <body> के नीचे बॉर्डर लगाने की कोशिश क्यों कर रहे हैं? क्या आप एक चिपचिपा पादलेख बनाने की कोशिश कर रहे हैं? अगर ऐसा है, तो आप <body> के अंदर दो अलग-अलग तत्व चाहते हैं।
 – 
Obsidian Age
7 अक्टूबर 2019, 06:14
1
तुम सही हो, मैं इसे अब देखता हूं। मैंने सुझाव हटा दिया है।
 – 
Tyler Roper
7 अक्टूबर 2019, 06:14

4 जवाब

मैंने सीएसएस में 2 मामूली बदलाव किए हैं और मुझे लगता है कि यह वही करता है जो आप अभी चाहते हैं। चेक कोड स्निपेट

html {
  position: relative;
  margin: 0;
  padding: 0;
}
body {
  position: relative;
  background: gray;
  margin: 0;
  padding: 0;
  /* changed here */
  min-height: 100vh;
  border-bottom: 3px solid red;
}
#Main {
  /* changed here */
  min-height: 100vh;
  width: 50%;
  margin: 0px auto;
  background: white;
}
<div id="Main">
    I SHOULD BE AT LEAST AS TALL AS THE VIEWPORT.
    <hr>
    Let's review:
    <br>HTML is min-height: 100% -- it's as least as tall as the viewport.
    <br>BODY is min-height: 100% -- it's as least as tall as HTML.
    <br>*I* am height: 100% -- WHY AM I NOT TALL
    <hr>
    Another WTF: the entire background is gray, yet the BODY's bottom doesn't stretch to the bottom.
    <hr>
    One more thing, when my contents grow, so should the body.
    <button onclick="document.getElementById('content').style.display='block';">
      Click me to add content.
    </button>
    <div id="content" style="height: 600px; background: green; display: none;">
      big content.
    </div>
  </div>

उम्मीद है ये मदद करेगा।

2
Saksham27 7 अक्टूबर 2019, 06:26
इसकी सीएसएस टिप्पणी है, सभी ऊंचाई के बारे में ही बात करते हैं। क्या बदला है यह देखना आसान है। मैंने सभी कोड डाल दिए हैं ताकि एक बार कोड स्निपेट यहां चला सकें और आउटपुट देख सकें
 – 
Saksham27
7 अक्टूबर 2019, 06:23
1
आह, वहां टिप्पणियां नहीं देखीं। धन्यवाद सक्षम।
 – 
Tyler Roper
7 अक्टूबर 2019, 06:32
1
यह वास्तव में काम करता है, लेकिन मैं फ्लेक्सबॉक्स समाधान का उपयोग कर रहा हूं क्योंकि इसमें अधिक समर्थन है। caniuse.com/#feat=flexbox बनाम caniuse.com/#feat=viewport-units
 – 
JS_Riddler
7 अक्टूबर 2019, 06:43
1
ठंडा। मैंने आपके कोड में सिर्फ यह दिखाने के लिए प्रदान किया है कि आप ऊंचाई के साथ क्या गलत कर रहे थे। फ्लेक्सबॉक्स वास्तव में बेहतर है।
 – 
Saksham27
7 अक्टूबर 2019, 06:46
html {
  margin: 0;
  padding: 0;
}
body {
  position: relative;
  background: gray;
  border-bottom: 3px solid red;
}
#Main {
  min-height: 100vh;
  width: 50%;
  margin: 0px auto;
  background: white;
}
<body>
  <div id="Main">
    I SHOULD BE AT LEAST AS TALL AS THE VIEWPORT.
    <hr>
    Let's review:
    <br>HTML is min-height: 100% -- it's as least as tall as the viewport.
    <br>BODY is min-height: 100% -- it's as least as tall as HTML.
    <br>*I* am height: 100% -- WHY AM I NOT TALL
    <hr>
    Another WTF: the entire background is gray, yet the BODY's bottom doesn't stretch to the bottom.
    <hr>
    One more thing, when my contents grow, so should the body.
    <button onclick="document.getElementById('content').style.display='block';">
      Click me to add content.
    </button>
    <div id="content" style="height: 600px; background: green; display: none;">
      big content.
    </div>
  </div>
</body>

मेरा मानना ​​है कि आपको जो उपयोग करना चाहिए वह 100vh है, जिसका अर्थ है व्यूपोर्ट की ऊंचाई का 100%।

0
Manuel Gozzi 7 अक्टूबर 2019, 06:29

मुझे इसके लिए फ्लेक्सबॉक्स का उपयोग करके काम करने का एक तरीका मिला, जिसमें लगभग सार्वभौमिक समर्थन है। ऐसा प्रतीत होता है कि HTML को display: flex; min-height: 100% पर सेट करने से, फ्लेक्सबॉक्स कम से कम व्यूपोर्ट के आकार का होगा। शरीर, एक फ्लेक्सबॉक्स बच्चा, फ्लेक्सबॉक्स की ऊंचाई में फिट होने के लिए "खिंचाव" करेगा। अगर body की सामग्री व्यूपोर्ट से लंबी है, तो वे html फ्लेक्सबॉक्स को भी लंबा कर देंगे।

मुझे अभी भी पता नहीं है कि क्यों min-height: 100% body पर काम नहीं करता है, क्योंकि HTML दस्तावेज़ में स्पष्ट रूप से ऊंचाई होती है, जब निरीक्षण किया जाता है। मैंने वास्तविक ऊंचाई निर्धारित करने की कोशिश की, और अधिक परिणाम प्राप्त हुए जिनका कोई मतलब नहीं है - उदाहरण के लिए body व्यूपोर्ट जितना लंबा होगा, फिर भी #Main body जितना लंबा नहीं होगा, height: 100% होने के बावजूद -- यह कैसे संभव है?

यह भी कोई मतलब नहीं है कि body पृष्ठभूमि शरीर की वास्तविक सामग्री से परे फैली हुई है।

मैं अब अपनी पोस्ट बंद कर दूंगा, क्योंकि सीएसएस कितना भयानक है, इस बारे में पूरी तरह से लिखने से पहले मैं केवल इतना ही बीएस ले सकता हूं।

html {
  min-height: 100%;
  display: flex;
  margin: 0;
  padding: 0;
}
body {
  flex-grow: 1;
  background: gray;
  margin: 0;
  padding: 0;
  border-bottom: 3px solid red;
}
#Main {
  height: 100%;
  width: 50%;
  margin: 0px auto;
  background: white;
}
<div id="Main">
    I SHOULD BE AT LEAST AS TALL AS THE VIEWPORT.
    <hr>
    Let's review:
    <br>HTML is min-height: 100% -- it's as least as tall as the viewport.
    <br>BODY is min-height: 100% -- it's as least as tall as HTML.
    <br>*I* am height: 100% -- WHY AM I NOT TALL
    <hr>
    Another WTF: the entire background is gray, yet the BODY's bottom doesn't stretch to the bottom.
    <hr>
    One more thing, when my contents grow, so should the body.
    <button onclick="document.getElementById('content').style.display='block';">
      Click me to add content.
    </button>
    <div id="content" style="height: 600px; background: green; display: none;">
      big content.
    </div>
  </div>
0
JS_Riddler 7 अक्टूबर 2019, 06:42

आप इस कोड का उपयोग कर सकते हैं

html {
            height:100%
        } 
        body {
            min-height:100%;
            position: relative;
            background: gray;
            margin: 0;
            padding: 0;
            border-bottom: 3px solid red;
        }
        #Main {
            height: 100%;
            width: 50%;
            margin: 0px auto;
            background: white;
        }
<div id="Main">
    I SHOULD BE AT LEAST AS TALL AS THE VIEWPORT.
    <hr>
    Let's review:
    <br>HTML is min-height: 100% -- it's as least as tall as the viewport.
    <br>BODY is min-height: 100% -- it's as least as tall as HTML.
    <br>*I* am height: 100% -- WHY AM I NOT TALL
    <hr>
    Another WTF: the entire background is gray, yet the BODY's bottom doesn't stretch to the bottom.
    <hr>
    One more thing, when my contents grow, so should the body.
    <button onclick="document.getElementById('content').style.display='block';">
    Click me to add content.
    </button>
    <div id="content" style="height: 600px; background: green; display: none;">
    big content.
    </div>
    </div>
0
Piyush Teraiya 7 अक्टूबर 2019, 09:08
यह काम नहीं करता है, #Main बहुत छोटा होने पर व्यूपोर्ट की ऊंचाई तक नहीं फैलता है। भले ही body में min-height: 100% है, और वास्तव में व्यूपोर्ट जितना लंबा है (इसकी निचली सीमा व्यूपोर्ट के नीचे भी है), किसी कारण से #Main खिंचाव नहीं होगा। मुझे यकीन है कि कुछ सीएसएस माफीकर्ता आएंगे और हमें सीएसएस दस्तावेज़ों से गहरे नियमों के बारे में बताएंगे।
 – 
JS_Riddler
7 अक्टूबर 2019, 12:18