Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> CSS

CSS का उपयोग करके विंडो की ऊंचाई का 100% DIV कैसे बनाएं?

<घंटा/>

CSS ऊंचाई गुण हमें किसी तत्व की ऊँचाई निर्दिष्ट करने में मदद करता है।

सिंटैक्स

CSS हाइट प्रॉपर्टी का सिंटैक्स इस प्रकार है -

Selector {
   height: /*value*/
}

उदाहरण

निम्नलिखित उदाहरण CSS ऊंचाई संपत्ति को दर्शाते हैं।

<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
      <style>
         html, body {
            margin: 0px;
            height: 100vh;
         }
         div {
            height: 100%;
            text-align: center;
            background: mistyrose;
         }
      </style>
   </head>
   <body>
      <div>100% height!!</div>
   </body>
</html>

उदाहरण

यह निम्न आउटपुट देता है

CSS का उपयोग करके विंडो की ऊंचाई का 100% DIV कैसे बनाएं?

<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
      <style>
         html, body {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            margin: 0px;
            height: 100vh;
            box-shadow: inset 0 0 40px lightblue;
         }
         div {
            width: 40%;
            height: 100vh;
            text-align: center;
            box-shadow: inset 0 0 20px lightcoral;
         }
      </style>
   </head>
   <body>
      <div>Watch This!</div>
      <div>Let Me Show You How The Boss Does It!!</div>
      <div>Open Up The Sky!!</div>
      <div>GO! GO! GO!!</div>
   </body>
</html>

यह निम्न आउटपुट देता है

CSS का उपयोग करके विंडो की ऊंचाई का 100% DIV कैसे बनाएं?


  1. CSS के साथ मेनू आइकन कैसे बनाएं?

    CSS के साथ एक मेनू आइकन बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> div {    width: 40px;    height: 7px;    backgrou

  1. सीएसएस के साथ ब्राउज़र विंडो की पूरी ऊंचाई फिट करने के लिए तत्वों को कैसे बढ़ाया जाए?

    सीएसएस के साथ ब्राउज़र विंडो की पूरी ऊंचाई फिट करने के लिए तत्वों को फैलाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <title>Page Title</title> <style>    *{       box-sizing: border-box;    }    h

  1. CSS क्लिप-पथ का उपयोग करके एक त्रिभुज कैसे बनाएं

    हम CSS क्लिप-पथ प्रॉपर्टी का उपयोग करके एक त्रिभुज बना सकते हैं। सिंटैक्स CSS क्लिप-पथ प्रॉपर्टी का सिंटैक्स इस प्रकार है - चयनकर्ता { क्लिप-पथ:/*मान*/} उदाहरण निम्नलिखित उदाहरण CSS क्लिप-पथ गुण को दर्शाते हैं। div { पैडिंग:10%; सीमा-त्रिज्या:2%; चौड़ाई:10%; बॉक्स-छाया:इनसेट 0 0 80px वायलेट; क्