प्रतिशत ऊंचाई HTML 5 / सीएसएस

176

मैं <div>सीएसएस में एक निश्चित प्रतिशत ऊंचाई निर्धारित करने की कोशिश कर रहा हूं , लेकिन यह केवल उसी आकार का है जो इसके अंदर की सामग्री के समान है। जब मैं HTML 5 को हटाता हूं <!DOCTYTPE html>, तो यह काम करता है, <div>पूरे पृष्ठ को इच्छानुसार लेता है। मैं पृष्ठ को मान्य करना चाहता हूं, इसलिए मुझे क्या करना चाहिए?

मेरे पास यह सीएसएस है <div>, जिस पर एक आईडी है page:

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}

html css height

— डी। स्ट्राउट
स्रोत

3

यहां सीएसएस heightसंपत्ति का प्रतिशत मूल्यों के साथ एक सरल और स्पष्ट विवरण दिया गया है : stackoverflow.com/a/31728799/3597276

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

DOCTYPE मुद्दे को संबोधित करते हैं: stackoverflow.com/a/32215263/3597276

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

371

मैं सीएसएस में एक निश्चित प्रतिशत ऊंचाई पर एक div सेट करने की कोशिश कर रहा हूं

प्रतिशत का क्या?

प्रतिशत ऊंचाई निर्धारित करने के लिए, इसके मूल तत्व (*) में एक स्पष्ट ऊंचाई होनी चाहिए। यह काफी हद तक स्व-स्पष्ट है, यदि आप ऊंचाई को छोड़ देते हैं auto, तो ब्लॉक इसकी सामग्री की ऊँचाई ले लेगा ... लेकिन यदि सामग्री की ऊँचाई आपके माता-पिता के प्रतिशत के संदर्भ में व्यक्त की गई है, तो आपने खुद को थोड़ा छोटा कर लिया है पकड़ो 22. ब्राउज़र देता है और बस सामग्री ऊंचाई का उपयोग करता है।

तो माता-पिता के पास एक स्पष्ट heightसंपत्ति होनी चाहिए । जब भी आप चाहते हैं कि ऊंचाई भी एक प्रतिशत हो सकती है, तो बस समस्या को अगले स्तर तक ले जाती है।

यदि आप div ऊँचाई को व्यूपोर्ट ऊँचाई का प्रतिशत बनाना चाहते हैं, तो div के प्रत्येक पूर्वज, सहित <html>और <body>के पास होना आवश्यक है height: 100%, इसलिए वहाँ स्पष्ट प्रतिशत ऊँचाई की एक श्रृंखला है जो div तक नीचे है।

(*: या, यदि div को तैनात किया जाता है, तो 'ब्लॉक युक्त', जो कि निकटतम पूर्वज भी तैनात किया जा सकता है।)

वैकल्पिक रूप से, सभी आधुनिक ब्राउज़र और IE> = 9 व्यूपोर्ट ऊंचाई ( vh) और व्यूपोर्ट चौड़ाई ( vw) के सापेक्ष नई सीएसएस इकाइयों का समर्थन करते हैं :

div {
    height:100vh; 
}

अधिक जानकारी के लिए यहां देखें ।

— bobince
स्रोत

हालाँकि पोर्ट्रेट स्क्रीन ओरिएंटेशन stackoverflow.com/questions/23198237/… के

— Dchris

1

कृपया ब्रायन कैंपबेल का जवाब नीचे देखें मुझे विश्वास है कि सही समाधान है। यह उत्तर वर्कअराउंड लगता है और वास्तविक मुद्दे को संबोधित नहीं करता है।

— एमजी डेवलपर

69

आपको <html>और <body>तत्वों को ऊंचाई निर्धारित करने की आवश्यकता है ; अन्यथा, वे केवल सामग्री को फिट करने के लिए पर्याप्त बड़े होंगे। उदाहरण के लिए :

<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>

स्निपेट का विस्तार करें

— ब्रायन कैंपबेल
स्रोत

6

¬_ I मुझे यह पता लगाने में 20 मिनट लगे कि मुझे दस्तावेज़ की ऊंचाई 100% तक निर्धारित करनी थी, भी। मैंने इसे बहुत देर से पढ़ा, लेकिन यह अभी भी बहुत शानदार है। विलाप

— सर्वार्थसिद्धि

इसे उत्तर के रूप में वोट दिया जाना चाहिए क्योंकि यह यहां आने वाले बहुत से लोगों के लिए एक समाधान देता है कि यह सोचकर कि क्या किया जा सकता है, पहला उत्तर देखें और इसके बारे में सोचें और यह न सोचें कि क्या कोई अन्य विधि इसे पढ़े बिना मौजूद है

— कोडफ्रीक

मैं मानता हूं कि यह सही उत्तर है, ऊंचाई काम नहीं करती है क्योंकि मूल तत्व जो शरीर है और एचटीएमएल को सेट करने की आवश्यकता है। यह उत्तर स्वीकृत उत्तर होना चाहिए।

— एमजी डेवलपर

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

— नेपदेव

15

बॉबिन के जवाब से आपको पता चलेगा कि किन मामलों में "ऊंचाई: XX%?" काम करेगा या नहीं।

यदि आप एक सेट अनुपात (ऊंचाई: इसकी स्वयं की चौड़ाई का%) के साथ एक तत्व बनाना चाहते हैं, तो ऐसा करने का सबसे अच्छा तरीका प्रभावी ढंग से ऊंचाई का उपयोग करके निर्धारित करना है padding-bottom। वर्ग के लिए उदाहरण:

<div class="square-container">
  <div class="square-content">
    <!-- put your content in here -->
  </div>
</div>

.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 100%; /* of parent width */
}
.square-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

वर्ग कंटेनर बस पैडिंग से बना होगा, और कंटेनर को भरने के लिए सामग्री का विस्तार होगा। इस विषय पर 2009 से लंबा लेख: http://alistapart.com/article/creating-intrinsic-ratios-for-video

— ओलेक्स पोनोमारेंको
स्रोत

यह बहुत अच्छा काम करता है। यह ब्राउज़र में भी तेजी से महसूस करता है, जबकि 100+ तत्वों को रखने वाले पृष्ठ का आकार बदलता है। धन्यवाद!

— डीन ग्रैंडे

5

आप उपयोग कर सकते हैं 100vw / 100vh। CSS3 हमें व्यूपोर्ट-रिलेटिव यूनिट्स देता है। 100vw का मतलब व्यूपोर्ट चौड़ाई का 100% है। 100vh; ऊंचाई का 100%।

    <div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
        <div style="width:70%; height: 100%; border: 2px dashed red"></div>
        <div style="width:30%; height: 100%; border: 2px dashed red"></div>
    </div>

— अहमद आगजादेह
स्रोत

4

नमस्ते! प्रतिशत (%) का उपयोग करने के लिए, आपको इसे मूल तत्व का% परिभाषित करना होगा। यदि आप शरीर {ऊँचाई: 100%} का उपयोग करते हैं तो यह काम नहीं करेगा क्योंकि माता-पिता की ऊंचाई में कोई प्रतिशत नहीं है। उस स्थिति में उस बॉडी हाइट को काम करने के लिए आपको इसे html {हाइट: 100%} में जोड़ना होगा

अन्य मामलों में उस परिभाषित मूल प्रतिशत से छुटकारा पाने के लिए जिसका आप उपयोग कर सकते हैं

शरीर {ऊंचाई: 100vh}

VH के लिए खड़ा है व्यूपोर्ट ऊंचाई

मुझे लगता है कि यह मदद करता है

— मो। ए। बारिक
स्रोत

2

कभी-कभी, आप सशर्त रूप से एक div की ऊँचाई सेट करना चाह सकते हैं, जैसे कि जब संपूर्ण सामग्री स्क्रीन की ऊँचाई से कम हो। सभी पेरेंट एलिमेंट्स को 100% पर सेट करने से कंटेंट कट हो जाएगा जब यह स्क्रीन साइज से ज्यादा लंबा होगा।

तो, इसके चारों ओर जाने का रास्ता न्यूनतम ऊंचाई निर्धारित करना है:

मूल तत्वों को स्वचालित रूप से अपनी ऊंचाई को समायोजित करने देना जारी रखें फिर अपनी मुख्य डिव में, हेडर और फुटर डिव के पिक्सेल आकारों को 100vh (व्यूपोर्ट इकाइयों) से घटाएं। सीएसएस में, कुछ इस तरह:

न्यूनतम ऊंचाई: कैल्क (100vh - 246px);

100vh स्क्रीन की पूरी लंबाई है, आसपास के डिवीजनों को घटाती है। न्यूनतम-ऊँचाई और ऊँचाई न तय करके, स्क्रीन की तुलना में लंबे समय तक सामग्री प्रवाहित होती रहेगी, बजाय कट ऑफ के।

— Jahmic
स्रोत