ब्राउज़र विंडो की 100% ऊँचाई कैसे बनायें

2136

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

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

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

html  css  height 
— माइक
स्रोत
7
मई आपको यह प्रश्न उपयोगी stackoverflow.com/questions/1366548/ /
— इवान नेवस्त्रुव
जाने का अच्छा तरीका है, लेकिन vh, vw आदि इकाइयों को छोटी गाड़ी के रूप में जाना जाता है। यदि आपको इसकी आवश्यकता है तो यह हल्का js विकल्प है: joaocunha.github.io/vunit
— तेज
यहां सीएसएस heightसंपत्ति का प्रतिशत मूल्यों के साथ एक सरल और स्पष्ट विवरण दिया गया है : stackoverflow.com/a/31728799/3597276
— माइकल बेंजामिन
4
आप ऊंचाई का उपयोग कर सकते हैं: 100vh; css संपत्ति
— विष्णु चौहान

जवाबों:

2830

सीएसएस 3 माप इकाइयों की एक जोड़ी कहा जाता है:

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

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

ऊपर लिंक W3 उम्मीदवार की सिफारिश से:

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

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

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

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

एचटीएमएल

<div></div>

सीएसएस

div {
    height: 100vh;
}

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

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

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

इसका उपयोग कई स्तंभों के साथ कैसे किया जा सकता है?

हाथ में सवाल के मामले में, एक बाएं और दाएं डिवाइडर की विशेषता है, यहां एक 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इसमें 200 पिक्सेल ऊँचाई है, 100% 200 पिक्सेल 200 पिक्सेल बन जाते हैं, ऊँचाई 100% नहींbody । 100vhइसके बजाय उपयोग करने का मतलब है कि pटैग ऊंचाई की bodyपरवाह किए बिना 100% ऊंचाई होगा div। आसानी से अंतर देखने के लिए JSFiddle के साथ इस पर एक नज़र डालें !

— जेम्स डोनली
स्रोत
35
स्क्रॉलिंग के साथ अजीब व्यवहार जब तत्व वास्तव में व्यूपोर्ट से लंबा होता है। कंटेनर व्यूपोर्ट की ऊँचाई को बनाए रखता है और सामग्री कंटेनर से बाहर बहती है। min-height:100vhइस के आसपास काम करने लगता है।
— wdm
8
@DGDD यह iOS Safari 6+, Android Browser 4.4+, BlackBerry Browser 10.0 और IEMobile 10.0 पर काम करता है। मैं नहीं जानता कि आप किस मोबाइल ब्राउज़र का उल्लेख कर रहे हैं, लेकिन वे 4 मोबाइल ब्राउज़र का 90% से अधिक उपयोग करते हैं। यह प्रश्न मोबाइल ब्राउज़र पर काम करने की आवश्यकता को निर्दिष्ट नहीं करता है।
— जेम्स डोनली
1
@ robross0606 फिर से वह सवाल नहीं है जिसका मैंने यहां जवाब दिया है। यह एक अलग सवाल है, जिसका जवाब वास्तव में flexbox का उपयोग करता है: stackoverflow.com/questions/90178/…
— जेम्स डोनली
1
@JamesDonnelly हाँ, मुझे पता है। लेकिन इस सवाल का जवाब नहीं है। ब्राउज़र विंडो की ऊंचाई में नवबेर ऊंचाई शामिल है। यह बेहतर होगा, क्योंकि मोबाइल ब्राउज़रों पर, व्यूपोर्ट की ऊँचाई हर बार नौबर्स शो / हाइड्स को बदल देती है।
— RedClover
3
मोबाइल अलर्ट: क्रोम मोबाइल के साथ vh मेस का उपयोग करना जो अपने नावबार पर ध्यान नहीं देता है। इसके बाद यह आपके पृष्ठ के शीर्ष को कवर करता है। एक गंभीर मुद्दा है अगर आप वहाँ एक मेनू है ...
— Offirmo
567

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

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

body, html {
  height: 100%;
}

#right {
  height: 100%;
}
— अरिओना रियान
स्रोत
109
मुझे गलत होने पर सही करें, लेकिन मुझे लगता है कि आपको वास्तव में काम करने के लिए दिव्य के सभी माता-पिता को ऊंचाई निर्धारित करने की आवश्यकता है
— Dany Y
अगर मैं निरंतर डिजाइन का उपयोग कर रहा हूं तो यह काम नहीं करेगा: पेज 6000px ऊंचाई, पृष्ठों का प्रतिनिधित्व करने वाले ब्लॉक के साथ। मैं चाहता हूं कि एक ब्लॉक बिल्कुल व्यूपोर्ट की ऊंचाई का हो।
— क्वर्टी
@ डैनी, आप सही कह रहे हैं। आपको स्क्रीन के ऊंचाई वाले हर चीज के निहितार्थ के साथ, डिव के सभी माता-पिता को ऊंचाई निर्धारित करने की आवश्यकता है। यहाँ एक उदाहरण है ।
— टोटो_टिको
यह ट्रिक कुछ मामलों के लिए काम करती है, लेकिन यह कुछ मामलों के लिए भी नहीं होगी, यदि आप संगतता या अधिक अनुशंसित तरीके से खोज करते हैं, तो आप @ जेम्स के उत्तर को ऊपर देख सकते हैं :) व्यूपोर्ट प्रतिशत पद्धति का उपयोग करके :), यह भी काम करना चाहिए। चीयर्स
— अरियोना रियान
8
@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% }
— कैमरनजोसेवेब
283

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

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

कर लेती।

— Tinister
स्रोत
16
यह तत्व प्रवाह से तत्व निकालकर उसके निचले मूल्य को उसके माता-पिता की ऊंचाई तक पहुंचाता है। यह आदर्श नहीं है जब आपकी सामग्री अपने माता-पिता की ऊंचाई से अधिक हो।
— रिकी बॉयस
1
यह तब काम नहीं करता है, जब इसके माता-पिता में से कोई एक सेट हो position:relativeऔर इसकी ऊंचाई व्यूपोर्ट का 100% न हो। यह अगले रिश्तेदार या पूर्ण पूर्वज के ऊपर और नीचे समायोजित करेगा।
— 14:85 पर Seika85
141

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

HTML:

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

सीएसएस:

#my-div {
    height: 100vh; /* vh stands for view-port height, 1vh is 1% of screen height */
}
— MrGeek
स्रोत
1
@ लैमर आपको * { box-sizing: border-box; }ऐसा होने से रोकने के लिए उपयोग करना चाहिए ।
— लुका स्टेब
2
व्यूपोर्ट इकाइयों पर ब्राउज़र समर्थन के लिए वर्थ चेकिंग कैन्यूज़: caniuse.com/#feat=viewport-units
— डेव एवरिट
132

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

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

नीचे दी गई छवि को देखो मैं तुम्हारे लिए यहाँ आकर्षित:

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

नीचे दिए गए स्निपेट को आप के लिए आज़माएँ:

.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>
स्निपेट का विस्तार करें

— एलिरेज़ा
स्रोत
100vh देने से पृष्ठ के लिए एक वर्टिकल स्क्रॉल जुड़ गया, इसलिए इस एक का अनुसरण किया, लेकिन काम नहीं किया। stackoverflow.com/questions/44645465/… । क्या ऊर्ध्वाधर स्क्रॉल से बचने का कोई तरीका है और div बिना किसी सामग्री के नीचे से छूता है?
— दिलीप थॉमस
@DILEEPTHOMAS मौजूदा के लिए देखोpaddings/margins
— महापुरूष
@ रूट फ़ाइल में मैंने जो कोशिश की * * मार्जिन: 0, पैडिंग: 0} के रूप में देने की कोशिश की, लेकिन काम नहीं किया
— DIPEP थॉमस
1
@DILEEPTHOMAS इस उदाहरण पर एक नज़र डालते हैं, यहां Alireza द्वारा प्रदान किया गया है, इसमें एक स्क्रॉलबार भी है क्योंकि शरीर तत्व में एक मार्जिन है। यदि आप मार्जिन हटाते हैं तो स्क्रॉलबार चला गया है। इसके अलग-अलग कारण हो सकते हैं, लेकिन यह सबसे पहले मैं जांच करूंगा।
— महापुरूष
101

फ्लेक्स मॉडल सॉल्यूशन 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>
स्निपेट का विस्तार करें

यहां फ्लेक्स मॉडल के बारे में अधिक जानें ।

— Airen
स्रोत
3
चेतावनी का एक शब्द: जब बाएं / दाएं कंटेनरों में से एक की सामग्री मूल शरीर की ऊंचाई से अधिक हो जाती है, तो विपरीत कंटेनर को आकार नहीं मिलेगा, इसलिए कंटेनर अलग-अलग ऊंचाइयों के साथ समाप्त होते हैं।
— schellmax
1
समस्या का उदाहरण स्कैल्मेक्स बताता है: jsfiddle.net/Arete/b4g0o3pq
— Arete
डिजाइन के आधार पर, overflow-y: auto;"कंटेनर मूल शरीर की ऊंचाई से अधिक हो सकते हैं" से बच सकते हैं।
— इवी सॉन्ग
54

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

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

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

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>
स्निपेट का विस्तार करें

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

— cletus
स्रोत
34

इसी से मेरा काम बना है:

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div>
स्निपेट का विस्तार करें

position:fixedइसके बजाय position:absoluteउस तरह से उपयोग करें , भले ही आप नीचे स्क्रॉल करें विभाजन स्क्रीन के अंत तक विस्तारित होगा।

— majda
स्रोत
"स्थिति: [निश्चित | निरपेक्ष]" वाला यह कोड पॉपअप की पृष्ठभूमि के लिए बहुत अच्छा है (जैसे कि जब आप किसी चित्र को ज़ूम करने के लिए क्लिक करते हैं), लेकिन उन मामलों में इतना निश्चित नहीं होता जब आपको वास्तव में नीचे स्क्रॉल करने की आवश्यकता होती है। फिर भी उपयोगी आटा!
— मैनिफ़ैटबॉय
29

यहाँ ऊंचाई के लिए एक तय है।

अपने सीएसएस उपयोग में:

#your-object: height: 100vh;

समर्थन नहीं करने वाले ब्राउज़र के लिए vh-units, आधुनिकीकरण का उपयोग करें।

इस स्क्रिप्ट को जोड़ें (इसके लिए पता लगाने के लिए vh-units)

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {   
        var height = parseInt(window.innerHeight/2,10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"],10);

        bool= !!(compStyle == height);
    });
    return bool;
});

#your-objectयदि ब्राउज़र समर्थन नहीं करता है, तो व्यूपोर्ट की ऊंचाई जोड़ने के लिए अंत में इस फ़ंक्शन का उपयोग करें vh-units:

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});
— जोनास सैंडस्टेड
स्रोत
23

100% चौड़ाई और ऊंचाई के लिए अलग तरह से काम करता है।

जब आप निर्दिष्ट करते हैं width: 100%, तो इसका मतलब है "मूल तत्व या खिड़की की चौड़ाई से उपलब्ध चौड़ाई का 100% हिस्सा लें।"

जब आप निर्दिष्ट करते हैं height: 100%, तो इसका मतलब केवल "मूल तत्व से उपलब्ध ऊंचाई का 100% है।" इसका मतलब है कि यदि आप शीर्ष स्तर के तत्व की ऊँचाई निर्दिष्ट नहीं करते हैं, तो सभी बच्चों की 0ऊँचाई या तो माता-पिता की ऊँचाई होगी , और इसीलिए आपको min-heightखिड़की की ऊँचाई रखने के लिए सबसे ऊपरी तत्व को सेट करना होगा ।

मैं हमेशा शरीर को 100vh की न्यूनतम ऊंचाई तक निर्दिष्ट करता हूं और यह स्थिति और गणना को आसान बनाता है,

body {
  min-height: 100vh;
}
— दिनेश पांडियन
स्रोत
16

min-height: 100%एक ऊंचाई जोड़ें और निर्दिष्ट न करें (या इसे ऑटो पर रखें)। इसने पूरी तरह से मेरे लिए काम किया:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}
— रेमस सिमियन
स्रोत
16

व्यूपोर्ट की चौड़ाई का 100vw === 100%।

100vh === 100% व्यूपोर्ट की ऊंचाई।

यदि आप divब्राउज़र-विंडो-आकार की चौड़ाई या ऊँचाई 100% सेट करना चाहते हैं, जिसका आपको उपयोग करना चाहिए:

चौड़ाई के लिए: 100vw

ऊंचाई के लिए: 100vh

या यदि आप इसे छोटे आकार में सेट करना चाहते हैं, तो CSS calcफ़ंक्शन का उपयोग करें । उदाहरण:

#example {
    width: calc(100vw - 32px)
}
— Руслан
स्रोत
12

<div>100% की ऊंचाई निर्धारित करने के लिए कई विधियाँ उपलब्ध हैं ।

विधि (ए):

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100%;
  width: 50%;
  background: green;
}
.div-right {
  height: 100%;
  width: 50%;
  background: gray;
}
<div class="div-left"></div>
<div class="div-right"></div>
स्निपेट का विस्तार करें

विधि (बी) vh का उपयोग कर:

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100vh;
  width: 50%;
  background: green;
  float: left;
}
.div-right {
  height: 100vh;
  width: 50%;
  background: gray;
  float: right;
}
<div class="div-left"></div>
<div class="div-right"></div>
स्निपेट का विस्तार करें

विधि (सी) फ्लेक्स बॉक्स का उपयोग कर:

html,
body {
  height: 100%;
  min-height: 100%;
}
.wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}
.div-left {
  width: 50%;
  background: green;
}
.div-right {
  width: 50%;
  background: gray;
}
<div class="wrapper">
  <div class="div-left"></div>
  <div class="div-right"></div>
</div>
स्निपेट का विस्तार करें

— संतोष खलसे
स्रोत
12

यह मेरे लिए काम किया:

html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

इस पेज से लिया गया ।

— परिक्षण
स्रोत
11

स्थापित करने के लिए प्रयास करें height:100%में htmlऔरbody 

html, 
body {
    height: 100%;
}

और यदि आप 2 डिव ऊंचाई समान उपयोग या मूल तत्व display:flexगुण सेट करना चाहते हैं।

— मोहम्मद जावेद
स्रोत
9

यहां तक ​​कि सभी जवाबों के साथ, मुझे यह जानकर आश्चर्य हुआ कि वास्तव में समस्या का समाधान किसी ने नहीं किया। यदि मैंने 100vh height/ का उपयोग किया है min-height, तो सामग्री एक पृष्ठ से अधिक लंबी होने पर लेआउट टूट गया। यदि मैंने इसके बजाय 100% height/ का उपयोग किया है min-height, तो सामग्री के पृष्ठ की ऊंचाई से कम होने पर लेआउट टूट गया।

मुझे जो समाधान मिला, जो दोनों मामलों को हल करता है, शीर्ष दो उत्तरों को संयोजित करना था:

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}
— machineghost
स्रोत
1
मेरे पास एक निश्चित 90 पीएक्स की ऊँचाई वाली नावबार है, इसलिए मुझे आपके "100vh" को "calc (100vh - 90px)" में बदलना था
— मार्क जैक्सन
8

बस "px" के बजाय "vh" इकाई का उपयोग करें, जिसका अर्थ है दृश्य-पोर्ट ऊँचाई। 

height: 100vh;
— Khalifeh
स्रोत
7

ब्लॉक तत्व डिफ़ॉल्ट रूप से, अपने माता-पिता की पूरी चौड़ाई का उपभोग करते हैं।

यह है कि वे अपनी डिजाइन की आवश्यकता को कैसे पूरा करते हैं, जो लंबवत स्टैक करना है।

9.4.1 ब्लॉक प्रारूपण संदर्भ

ब्लॉक फॉर्मेटिंग संदर्भ में, बक्से एक के बाद एक, लंबवत रूप से, एक ब्लॉक वाले शीर्ष पर शुरू होते हैं।

यह व्यवहार, हालांकि, ऊंचाई तक नहीं है।

डिफ़ॉल्ट रूप से, अधिकांश तत्व अपनी सामग्री की ऊंचाई ( height: auto) हैं।

यदि आप अतिरिक्त स्थान चाहते हैं, तो चौड़ाई के विपरीत, आपको एक ऊंचाई निर्दिष्ट करने की आवश्यकता है।

इसलिए, इन दो बातों को ध्यान में रखें:

  • जब तक आप पूरी चौड़ाई नहीं चाहते, आपको ब्लॉक तत्व की चौड़ाई को परिभाषित करना होगा
  • जब तक आप सामग्री की ऊँचाई नहीं चाहते, आपको एक तत्व की ऊँचाई को परिभाषित करने की आवश्यकता है

.Contact {
  display: flex;     /* full width by default */
  min-height: 100vh; /* use full height of viewport, at a minimum */
}

.left {
  flex: 0 0 60%;
  background-color: tomato;
}

.right {
  flex: 1;
  background-color: pink;
}

body { margin: 0; } /* remove default margins */
<div class="Contact">
  <section class="left">
    <div class="">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
    </div>
  </section>
  <section class="right">
    <img />
  </section>
</div>
स्निपेट का विस्तार करें

— माइकल बेंजामिन
स्रोत
7

यहाँ कुछ ऐसा है जो पिछले उत्तरों में आपके जैसा नहीं था, लेकिन यह कुछ के लिए उपयोगी हो सकता है:

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}

#one {
  background-color: red;
}

#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

https://jsfiddle.net/newdark/qyxkk558/10/

— newdark-यह
स्रोत
6

FlexBox सीएसएस का उपयोग करें

इस प्रकार की समस्या के लिए फ्लेक्सबॉक्स एक आदर्श फिट है। जबकि ज्यादातर क्षैतिज दिशा में सामग्री बिछाने के लिए जाना जाता है, फ्लेक्सबॉक्स वास्तव में सिर्फ ऊर्ध्वाधर लेआउट समस्याओं के लिए काम करता है। आपको बस एक लचीले कंटेनर में ऊर्ध्वाधर सेक्शन को लपेटना है और यह चुनना है कि आप किसका विस्तार करना चाहते हैं। वे स्वचालित रूप से अपने कंटेनर में सभी उपलब्ध स्थान ले लेंगे।

— robross0606
स्रोत
6

विकल्पों में से एक सीएसएस तालिका का उपयोग कर रहा है। इसमें महान ब्राउज़र समर्थन है और यहां तक ​​कि इंटरनेट एक्सप्लोरर 8 में काम करता है।

JSFiddle उदाहरण

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.left, .right {
  display: table-cell;
  width: 50%;
}
.right {
  background: grey;
}
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>
स्निपेट का विस्तार करें

— स्टिकर
स्रोत
6

इस कोशिश - परीक्षण:

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

संपादित करें: 2020 अद्यतन:

vhअब आप उपयोग कर सकते हैं:

#right, #left {
  height: 100vh
}
— lukaszkups
स्रोत
5

आप उपयोग कर सकते हैं display: flexऔरheight: 100vh

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

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>
स्निपेट का विस्तार करें

— थुक गुयेन
स्रोत
इस जवाब के ठीक 26 दिन पहले पोस्ट किए गए सटीक कार्यान्वयन के साथ पहले से ही कई फ्लेक्सबॉक्स समाधान पोस्ट किए गए हैं।
— टायलरएच
5

आपको दो चीजें करने की जरूरत है, एक है ऊंचाई को 100% पर सेट करना जो आपने पहले ही किया था। दूसरे ने स्थिति को निरपेक्ष निर्धारित किया है। यह ट्रिक काम आना चाहिए।

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

स्रोत

— प्रभाकर उंडार्थी
स्रोत
3
आउटडेटेड समाधान। vhइसके बजाय उपयोग करें ।
— हिमस्खलन
1
vhयदि आप मोबाइल उपकरणों पर उत्तरदायी डिज़ाइन का उपयोग करने की योजना बनाते हैं तो इसका उपयोग न करें ।
— अलेक्जेंडर किम
5

वास्तव में मेरे लिए सबसे अच्छा काम vhसंपत्ति का उपयोग करना था ।

मेरे रिएक्ट एप्लिकेशन में मैं चाहता था कि डिविज़ होने के बाद भी मैं पेज को उच्च से मैच करूँ। मैंने कोशिश की height: 100%;, overflow-y: auto;लेकिन उनमें से किसी ने भी काम नहीं किया जब height:(your percent)vh;इसे सेट करने का इरादा था।

नोट: यदि आप पैडिंग, राउंड कॉर्नर इत्यादि का उपयोग कर रहे हैं, तो उन मूल्यों को अपनी vhसंपत्ति के प्रतिशत से घटाना सुनिश्चित करें या यह अतिरिक्त ऊंचाई जोड़ता है और स्क्रॉल बार प्रदर्शित करता है। यहाँ मेरा नमूना है:

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}
— JimmyFlash
स्रोत
वैसे, आप अपने तत्व की ऊंचाई को प्रभावित करने वाले 'गोल कोनों' का उल्लेख करते हैं, मुझे उम्मीद है कि सेटिंग box-sizing: border-box;इस पर काबू पा लेगी, इसका मतलब है कि तत्व के आकार (चौड़ाई और ऊंचाई) की गणना करते समय सीमा आकार को भी ध्यान में रखा जाता है।
— नेक
5

एक बार यह कोशिश करो ...

*{
  padding:0;
  margin:0;
}
.parent_div{
  overflow:hidden;
  clear:both;
  color:#fff;
  text-align:center;
}

.left_div {
  float: left;
  height: 100vh;
  width: 50%;
  background-color: blue;

}

.right_div {
  float: right;
  height: 100vh;
  width: 50%;
  background-color: green;

}
<div class=" parent_div">
  <div class="left_div">Left</div>
  <div class="right_div">Right</div>
</div>
स्निपेट का विस्तार करें

— सुनील राजपूत
स्रोत
3

यदि आप position: absolute;jQuery का उपयोग करते हैं , तो आप उपयोग कर सकते हैं

$("#mydiv").css("height", $(document).height() + "px");
— जॉन स्मिथ वैकल्पिक
स्रोत
1
जावास्क्रिप्ट की कोई आवश्यकता नहीं है। आधुनिक समाधान सीएसएस फ्लेक्स बॉक्स मॉडल का उपयोग करना है ।
— डैन डस्केलस्क्यू
यदि आप JS का उपयोग कर रहे हैं, तो मुझे यह काफी उपयोगी लगा। नोट: $ (विंडो) .लोड () के साथ इसका उपयोग करने के लिए इसका सबसे अच्छा, क्योंकि आपको F5 या CTRL + F5 का उपयोग करके लौटाए जा रहे विभिन्न परिणाम मिलेंगे। अधिक जानकारी के लिए इस लिंक को देखें। stackoverflow.com/questions/13314058/…
— एडवर्ड
2

एचटीएमएल

   // vw: hundredths of the viewport width.
   // vh: hundredths of the viewport height.
   // vmin: hundredths of whichever is smaller, the viewport width or height.
   // vmax: hundredths of whichever is larger, the viewport width or height.

<div class="wrapper">
    <div class="left">
        Left
    </div>
    <div class="right">
        Right
    </div>
</div>

सीएसएस

<style>
    .wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: 100vh; // Height window (vh)
    }
    .wrapper .left{
        widht: 80%; // Width optional, but recommended
    }
    .wrapper .right{
        widht: 20%; // Width optional, but recommended
        background-color: #dd1f26;
    }
<style>
— रामनिवास शर्मा
स्रोत
1
संभावित गलत वर्तनी: widht(अंत के निकट)
— पीटर मॉर्टेंसन
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.