सवाल ब्राउज़र विंडो की एक div 100% ऊंचाई कैसे बनाएं?


मेरे पास दो कॉलम के साथ एक लेआउट है - एक बाएं div और एक अधिकार div

सही div एक भूरा है background-color, और मुझे उपयोगकर्ता की ब्राउज़र विंडो की ऊंचाई के आधार पर लंबवत विस्तार करने की आवश्यकता है। अभी अभी background-color उसमें सामग्री के अंतिम भाग पर समाप्त होता है div

मैंने कोशिश की height:100%, min-height:100%; आदि।


1685
2017-10-15 21:18


मूल


आपको यह प्रश्न उपयोगी मिलेगा stackoverflow.com/questions/1366548/... - Ivan Nevostruev
जाने का अच्छा तरीका है, लेकिन vh, vw आदि इकाइयों को छोटी गाड़ी कहा जाता है। यदि आपको इसकी आवश्यकता है तो यह हल्का जेएस विकल्प है: joaocunha.github.io/vunit - see sharper
यहां सीएसएस का एक सरल और स्पष्ट स्पष्टीकरण दिया गया है height प्रतिशत मूल्यों के साथ संपत्ति: stackoverflow.com/a/31728799/3597276 - Michael_B


जवाब:


कुछ CSS3 माप इकाइयों को बुलाया जाता है:

व्यूपोर्ट-प्रतिशत (या व्यूपोर्ट-सापेक्ष) लंबाई

व्यूपोर्ट-प्रतिशत लंबाई क्या हैं?

उपरोक्त लिंक किए गए डब्ल्यू 3 उम्मीदवार सिफारिश से:

व्यूपोर्ट-प्रतिशत लंबाई प्रारंभिक युक्त ब्लॉक के आकार के सापेक्ष हैं। जब प्रारंभिक युक्त ब्लॉक की ऊंचाई या चौड़ाई बदल जाती है, तो वे तदनुसार स्केल किए जाते हैं।

ये इकाइयां हैं vh (व्यूपोर्ट ऊंचाई) vw (व्यूपोर्ट चौड़ाई), vmin (न्यूनतम लंबाई देखें) और vmax (अधिकतम लंबाई देखें)।

एक विभक्त ब्राउज़र की ऊंचाई को भरने के लिए इसका उपयोग कैसे किया जा सकता है?

इस सवाल के लिए, हम इसका उपयोग कर सकते हैं vh: 1vh व्यूपोर्ट की ऊंचाई के 1% के बराबर है। यानी, 100vh ब्राउज़र विंडो की ऊंचाई के बराबर है, भले ही तत्व डीओएम पेड़ में स्थित है:

एचटीएमएल

<div></div>

सीएसएस

div {
    height:100vh;
}

यह सचमुच सब कुछ जरूरी है। यहां है JSFiddle उदाहरण इसका उपयोग में।

कौन से ब्राउज़र इन नई इकाइयों का समर्थन करते हैं?

यह वर्तमान में ओपेरा मिनी के अलावा सभी अप-टू-डेट प्रमुख ब्राउज़रों पर समर्थित है। चेक आउट क्या में उपयोग कर सकता हूँ... आगे के समर्थन के लिए।

इसका उपयोग एकाधिक कॉलम के साथ कैसे किया जा सकता है?

हाथ में सवाल के मामले में, एक बाएं और दाएं विभाजक की विशेषता है, यहां एक है JSFiddle उदाहरण दोनों शामिल दो कॉलम लेआउट दिखा रहा है vh तथा vw

कैसे 100vh इससे भिन्न 100%?

उदाहरण के लिए यह लेआउट लें:

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

p यहां टैग 100% ऊंचाई पर सेट है, लेकिन इसमें शामिल है div 200px ऊंचाई है, 200px का 100% 200px बन जाता है, नहीं 100% body ऊंचाई। का उपयोग करते हुए 100vh इसके बजाय इसका मतलब है कि p टैग की 100% ऊंचाई होगी body पर ध्यान दिए बगैर div ऊंचाई। इस पर एक नजर डालिए JSFiddle के साथ आसानी से अंतर देखने के लिए!


2371
2018-05-30 13:33



बहुत दुखी यह है कि मैं इसे कैल्क () के साथ संयोजन में उपयोग नहीं कर सकता। जैसे कि मेरे तत्व की सीमाएं हैं, height: calc(100vh - 2px); - Langdon
स्क्रॉलिंग के साथ अजीब व्यवहार जब तत्व वास्तव में व्यूपोर्ट से लंबा होता है। कंटेनर व्यूपोर्ट ऊंचाई को बनाए रखता है और सामग्री कंटेनर से बहती है। min-height:100vh ऐसा लगता है कि इस के आसपास काम करता है। - wdm
@ डीजीडीडी यह आईओएस सफारी 6+, एंड्रॉइड ब्राउज़र 4.4+, ब्लैकबेरी ब्राउज़र 10.0 और आईमोबाइल 10.0 पर काम करता है। मुझे नहीं पता कि आप किस मोबाइल ब्राउजर को रेफर कर रहे हैं, लेकिन वे 4 9% से अधिक मोबाइल ब्राउजर इस्तेमाल करते हैं। यह प्रश्न मोबाइल ब्राउज़र पर काम करने के लिए एक आवश्यकता निर्दिष्ट नहीं करता है। - James Donnelly
@ robross0606 फिर से वह सवाल नहीं है जिसका मैंने जवाब दिया है। यह एक अलग सवाल है, जिसका उत्तर वास्तव में flexbox का उपयोग करता है: stackoverflow.com/questions/90178/... - James Donnelly
वीएच सभी मोबाइल पर नहीं है जैसा कि मैं परीक्षण कर सकता हूं - Daniel Rodriguez


यदि आप की ऊंचाई निर्धारित करना चाहते हैं <div> या कोई तत्व, आपको ऊंचाई निर्धारित करनी चाहिए <body> तथा <html> 100% तक भी। फिर आप तत्व की ऊंचाई 100% के साथ सेट कर सकते हैं :)

यहाँ एक उदाहरण है:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

522
2017-12-11 13:10



यह आईई 8 में काम नहीं करता है। - TreK
अगर मैं गलत हूं तो मुझे सही करें, लेकिन मुझे लगता है कि आपको वास्तव में काम करने के लिए div के सभी माता-पिता को ऊंचाई निर्धारित करने की भी आवश्यकता है - Dany Y
यह आश्चर्यजनक नहीं है। यह बेहद दुखद है। (HTML के बारे में बात नहीं जवाब) - Den
यदि मैं निरंतर डिज़ाइन का उपयोग कर रहा हूं तो यह काम नहीं करेगा: पृष्ठ 6000px ऊंचाई, पृष्ठों का प्रतिनिधित्व करने वाले ब्लॉक के साथ। मैं चाहता हूं कि एक ब्लॉक बिल्कुल व्यूपोर्ट की ऊंचाई हो। - Qwerty
@ क्वर्टी, यहां समाधान है। सीएसएस को इस प्रकार सेट करें: html { height: 100%*number of blocks; }, body { height: 100%;}, #div { height: 100%/number of blocks; }। तो यदि आपके पास 3 अनुभाग हैं, तो यह होगा html { height: 300%; } body { height: 100%; } #div { height: 33.3% } - cameronjonesweb


यदि आप अपने तत्वों को पूरी तरह से स्थापित करने में सक्षम हैं,

position: absolute;
top: 0;
bottom: 0;

यह करोगे


242
2017-10-15 21:31



यह दस्तावेज़ प्रवाह से तत्व को ले कर काम करता है और इसके निचले मूल्य को अपने माता-पिता की ऊंचाई तक सीमित करता है। यह आदर्श नहीं है जब आपकी सामग्री अपने माता-पिता की ऊंचाई से अधिक हो। - Ricky Boyce
मैंने कोशिश की, यह बहुत अच्छा है, लेकिन फिर पूर्ण स्थिति के साथ, आप मार्जिन के साथ क्षैतिज रूप से केंद्र नहीं कर सकते- [बाएं | दाएं]: ऑटो - Petruza
यह एक अच्छा समाधान है। एक बार टिप्पणी के बाद, # पेट्रूज़ा के समान मुझे मार्जिन बाएं और दाएं के साथ परेशानी हो रही थी इसलिए मैंने निम्नलिखित जोड़ना समाप्त कर दिया: शरीर {रंग: # 004 ए 6 ई; स्थिति: पूर्ण; शीर्ष: 0; नीचे: 0; बाएं: 0; दाएं: 0; } - Kremena Lalova
यह काम नहीं करता है, जब उसके माता-पिता में से एक सेट किया जाता है position:relative और इसकी ऊंचाई व्यूपोर्ट का 100% नहीं है। यह अपने अगले रिश्तेदार या पूर्ण पूर्वजों के लिए ऊपर और नीचे समायोजित करेगा। - Seika85
धन्यवाद यह शरीर और एचटीएमएल ऊंचाई बढ़ाने के लिए बेहतर कहने से बेहतर काम करता है 100% - dave o grady


आप सीएसएस में व्यू-पोर्ट इकाई का उपयोग कर सकते हैं:

एचटीएमएल:

<div id="my-div">Hello World!</div>

सीएसएस:

#my-div {
    height:100vh; /*vh stands for view-port height, 1vh is 1% of screen height*/
}

129
2018-05-04 11:11



यह पैडिंग के साथ कैसे काम करता है? जब मैं # my-div में पैडिंग जोड़ता हूं, तो यह दृश्य पोर्ट से बड़ा हो जाता है। - Lamar
@ लामर आप का उपयोग करना चाहिए * { box-sizing: border-box; } ऐसा होने से रोकने के लिए। - Luca Steeb
व्यूपोर्ट इकाइयों पर ब्राउज़र समर्थन के लिए वर्थ चेकिंग कैन्यूज: caniuse.com/#feat=viewport-units - Dave Everitt
ऐसा लगता है कि IE9 में भी सभी ब्राउज़रों में अच्छी तरह से काम करता है - luky
यह आईओएस सफारी में काम नहीं करता है, जो वीएच को अनिवार्य रूप से बेकार प्रदान करता है, क्योंकि ऐप्पल को इसे अपनाने का कोई इरादा नहीं है। - 3Dom


अन्य सभी समाधान, जिनमें शीर्ष-वोट वाला एक शामिल है vh की तुलना में उप-इष्टतम हैं फ्लेक्स मॉडल उपाय।

के आगमन के साथ सीएसएस फ्लेक्स मॉडल, 100% ऊंचाई की समस्या को हल करना बहुत आसान हो जाता है: उपयोग करें height: 100%; display: flexमाता-पिता पर, और flex: 1 बाल तत्वों पर। वे स्वचालित रूप से अपने कंटेनर में सभी उपलब्ध स्थान ले लेंगे।

ध्यान दें कि मार्कअप और सीएसएस कितना आसान है। कोई टेबल हैक या कुछ भी नहीं।

फ्लेक्स मॉडल है सभी प्रमुख ब्राउज़रों द्वारा समर्थित साथ ही IE11 +।

html, body {
  height: 100%;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>

के बारे में और जानें फ्लेक्स मॉडल यहाँ।


86
2018-06-12 14:14



चेतावनी का एक शब्द: जब बाएं / दाएं कंटेनरों में से एक की सामग्री मूल शरीर की ऊंचाई से अधिक हो जाती है, तो विपरीत कंटेनर का आकार नहीं बदला जाएगा, इसलिए कंटेनर अलग-अलग ऊंचाइयों के साथ समाप्त होते हैं। - schellmax
समस्या का उदाहरण Schellmax बताता है: jsfiddle.net/Arete/b4g0o3pq - Arete


आप कुछ महत्वपूर्ण विवरणों का उल्लेख नहीं करते हैं जैसे:

  • क्या लेआउट निश्चित चौड़ाई है?
  • या तो दोनों कॉलम निश्चित चौड़ाई हैं?

यहां एक संभावना है:

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; // width optional
}

#left {
  background: yellow;
  float: left;
  width: 360px; // width optional but recommended 
}

#right {
  background: grey;
  margin-left: 360px; // must agree with previous width 
}
<html>
<head>
  <title>Example</title>
</head>

<body>
  <div id="wrapper">
    <div id="left">
      Left
    </div>

    <div id="right"></div>
  </div>
</body>

</html>

इस पर निर्भर करता है कि किन कॉलम को ठीक करने की आवश्यकता है और जो तरल हैं। आप इसे पूर्ण स्थिति के साथ भी कर सकते हैं लेकिन मुझे आमतौर पर फ्लोट्स का उपयोग करके बेहतर परिणाम मिलते हैं (विशेष रूप से क्रॉस-ब्राउज़र के संदर्भ में)।


48
2017-10-15 23:13





आप उपयोग कर सकते हैं vh इस मामले में जो सापेक्ष है ऊंचाई का 1% व्यूपोर्ट का।

इसका मतलब है कि यदि आप ऊंचाई को कवर करना चाहते हैं, तो बस उपयोग करें 100vh

मैं आपके लिए यहां खींची गई छवि को देखो:

How to make a div 100% height of the browser window?

नीचे दिए गए स्निपेट को आपके लिए बनाया गया है:

.left {
  height: 100vh;
  width: 50%;
  background-color: grey;
  float: left;
}

.right {
  height: 100vh;
  width: 50%;
  background-color: red;
  float: right;
}
<div class="left"></div>
<div class="right"></div>


41
2018-06-03 17:43



ऊपर की ओर और क्या होता है यदि आपकी सामग्री 100% चौड़ाई और ऊंचाई से अधिक हो जाती है, तो 100 कॉलम और 1000 पंक्तियों वाली एक तालिका कहें - PirateApp