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




css css3 (18)

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

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

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


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

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

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

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

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

या यदि आप इसे छोटे आकार का उपयोग सीएसएस calc function सेट करना चाहते हैं। उदाहरण:

#example { width: calc(100vw - 32px) }


आप display: flex उपयोग कर सकते हैं 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>


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

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

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

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>

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


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

एचटीएमएल:

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

सीएसएस:

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

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

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px;"> </div>

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


इसे आज़माएं - परीक्षण किया गया:

body {
  min-height: 100%;
}

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

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

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

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

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

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

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

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

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

एचटीएमएल

<div></div>

सीएसएस

div {
    height:100vh;
}

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


निम्नलिखित सीएसएस आज़माएं:

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

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

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

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

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

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

डिफ़ॉल्ट रूप से, अधिकांश तत्व उनकी सामग्री की height: auto ( 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>


भले ही यह समाधान jQuery I के साथ किया गया हो, हालांकि यह किसी भी व्यक्ति के लिए स्क्रीन आकार फिट करने के लिए कॉलम करने के लिए उपयोगी हो सकता है।

पृष्ठ के शीर्ष पर शुरू होने वाले कॉलम के लिए, यह समाधान सबसे सरल है।

body,html{
  height:100%;
}

div#right{
  height:100%
}

उन स्तंभों के लिए जो पृष्ठ के शीर्ष पर शुरू नहीं हो रहे हैं (उदाहरण के लिए: यदि वे शीर्षलेख से नीचे शुरू हो रहे हैं)।

<script>
     $(document).ready(function () {
        var column_height = $("body").height();
        column_height = column_height - 100; // 100 is the header height
        column_height = column_height + "px";
        $("#column").css("height",column_height);
    });
</script>

पहली विधि शरीर की ऊंचाई और स्तंभों को भी लागू करती है, जिसका अर्थ है कि height100% + height100%

दूसरी विधि को शरीर की ऊंचाई प्राप्त करके उपयोगकर्ता को दिखाए गए पृष्ठ की ऊंचाई प्राप्त होती है और फिर कॉलम को प्रदर्शित करने के लिए कितनी ऊंचाई छोड़ी जाती है, यह जानने के लिए हेडर आकार को घटा देता है।


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

$("#mydiv").css("height", $(document).height() + "px");

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

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

यह करोगे


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

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

#wrapper {
    min-height: 100%; /* min. height for modern browser */
    height:auto !important; /* important rule for modern Browser */
    height:100%; /* min. height for IE */
    overflow: hidden !important; /* FF scroll-bar */
}

इस पृष्ठ से लिया गया।


यहां कुछ ऐसा है जो आपके ऊपर जैसा था लेकिन कुछ के लिए सहायक नहीं हो सकता है।

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/


सबसे आसान:

html,
body {
  height: 100%;
  min-height: 100%;
}
body {
  position: relative;
  background: purple;
  margin: 0;
  padding: 0;
}
.fullheight {
  display: block;
  position: relative;
  background: red;
  height: 100%;
  width: 300px;
}
<html class="">

<body>
  <div class="fullheight">
    This is full height.
  </div>
</body>

</html>


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

सीएसएस फ्लेक्स मॉडल के आगमन के साथ, 100% ऊंचाई की समस्या को हल करना बहुत आसान हो जाता है: height: 100%; display: flex उपयोग करें height: 100%; display: flex height: 100%; display: flex माता-पिता पर 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>

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


<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>


height:100% सेट करने का प्रयास करें height:100% html और body में height:100%

html, 
body {
    height: 100%;
}

और यदि आप 2 div ऊंचाई समान उपयोग करना चाहते हैं या पैरेंट तत्व display:flex सेट करना चाहते display:flex प्रॉपर्टी।





height