हमेशा एक पूर्ण स्क्रीन बनाने के लिए कैसे <div>

170

कोई फर्क नहीं पड़ता कि इसकी सामग्री कैसी है।

क्या इसे करना संभव है?

html  css  responsive 
— मुखौटा
स्रोत
2
यहाँ बहुत सारे शानदार उत्तर हैं, लेकिन मुझे फ्लेक्सबॉक्स का कोई उल्लेख नहीं दिखाई देता है, इसलिए मैंने सोचा कि मैं इस 2 सेंट को साझा करूंगा: माता-पिता का 100% होना एक बात है, लेकिन अगर समय लगता है, तो व्यवस्था करें , और उस div में कुछ सामग्री को केंद्र में रखकर, आप flexbox को देखना चाहेंगे। css-tricks.com/snippets/css/a-guide-to-flexbox
— ArleyM

जवाबों:

146

यह हमेशा मेरे लिए काम करता है:

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }

        #wrapper {
            min-height: 100%; 
        }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
        #container {
            height: 100%;
        }
    </style>
    <![endif]-->
</head>

<body>
    <div id="wrapper">some content</div>
</body>

यह शायद इस समस्या का सबसे सरल समाधान है। केवल चार सीएसएस विशेषताओं को सेट करने की आवश्यकता है (हालांकि उनमें से एक केवल IE को खुश करने के लिए है)।

— एडम हर्ट
स्रोत
1
@AdamHarte यदि आप CSS से 'html' चयनकर्ता को हटाते हैं तो यह काम क्यों नहीं करता है? → शरीर {ऊंचाई: 100%; मार्जिन: 0; }
— एलेक्स प्रुट
2
@ P.Alex मैथ! यदि आपकी HTML टैग्स की ऊंचाई इसकी सामग्री को फिट करने के लिए फैली हुई है, तो शरीर की ऊंचाई इसके माता-पिता की 100% है, तो आप इसे उपलब्ध स्थान के 100% के लिए मजबूर नहीं करेंगे।
— एडम हर्ट
1
मैं सिर्फ cefsharp क्रोमियम का उपयोग करके इसे wpf में आज़माता हूं और यह काम करता है :)
— adminSoftDK
106

यह शुद्ध सीएसएस का उपयोग करके फुलस्क्रीन डिव बनाने का मेरा समाधान है। यह एक पूर्ण स्क्रीन डिव प्रदर्शित करता है जो स्क्रॉलिंग पर लगातार बना रहता है। और अगर पेज कंटेंट स्क्रीन पर फिट बैठता है, तो पेज स्क्रॉल-बार नहीं दिखाएगा।

IE9 +, फ़ायरफ़ॉक्स 13+, क्रोम 21+ में परीक्षण किया गया

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title> Fullscreen Div </title>
  <style>
  .overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(51,51,51,0.7);
    z-index: 10;
  }
  </style>
</head>
<body>
  <div class='overlay'>Selectable text</div>
  <p> This paragraph is located below the overlay, and cannot be selected because of that :)</p>
</body>
</html>
स्निपेट का विस्तार करें

— मिहाई सिचु
स्रोत
58

यह इसे करने का सबसे स्थिर (और आसान) तरीका है, और यह सभी आधुनिक ब्राउज़रों में काम करता है:

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background: lime; /* Just to visualize the extent */
  
}
<div class="fullscreen">
  Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa.
</div>
स्निपेट का विस्तार करें

फ़ायरफ़ॉक्स, क्रोम, ओपेरा, विवाल्डी, IE7 + (IE11 में अनुकरण पर आधारित) में काम करने के लिए परीक्षण किया गया।

— भय
स्रोत
1
यदि आप निम्नलिखित का उपयोग करते हैं तो यह बेहतर काम करता है: position: fixed; top: 0; left: 0;और अब जो भाग अलग है width: 100%; height: 100%;:। यह वास्तव में पुराने ब्राउज़रों के साथ-साथ त्रुटिपूर्ण रूप से काम करता है।
— ऐर्ट डेब Braber
1
नीचे और दाएं की तुलना में चौड़ाई और ऊंचाई का उपयोग करना बेहतर क्यों है? यदि आप चौड़ाई और ऊंचाई का उपयोग करते हैं, और कुछ पैडिंग और / या बॉर्डर भी चाहते हैं, तो आपको यह भी सुनिश्चित करने की आवश्यकता है कि आपके पास है box-sizing: border-box;, अन्यथा आपको बड़ा बॉक्स मिलेगा जो स्क्रॉल करने का कारण होगा। देखें इस ।
— विस्मय
31

आधुनिक ब्राउज़रों के साथ ऐसा करने का सबसे अच्छा तरीका यह होगा कि व्यूपोर्ट-प्रतिशत लंबाई का उपयोग किया जाए , जो ब्राउज़र के लिए नियमित प्रतिशत लंबाई तक गिरते हैं जो उन इकाइयों का समर्थन नहीं करते हैं ।

व्यूपोर्ट-प्रतिशत लंबाई व्यूपोर्ट की लंबाई पर ही आधारित होती है। यहां हम जिन दो इकाइयों का उपयोग करेंगे, वे हैं vh(व्यूपोर्ट ऊंचाई) और vw(व्यूपोर्ट चौड़ाई)। 100vhव्यूपोर्ट की ऊंचाई के 100vw100% के बराबर है , और व्यूपोर्ट की चौड़ाई के 100% के बराबर है।

निम्न HTML मानकर:

<body>
    <div></div>
</body>

आप निम्नलिखित का उपयोग कर सकते हैं:

html, body, div {
    /* Height and width fallback for older browsers. */
    height: 100%;
    width: 100%;

    /* Set the height to match that of the viewport. */
    height: 100vh;

    /* Set the width to match that of the viewport. */
    width: 100vw;

    /* Remove any browser-default margins. */
    margin: 0;
}

यहाँ एक JSField डेमो है, जो divपरिणाम फ्रेम की ऊंचाई और चौड़ाई दोनों को भरने वाले तत्व को दर्शाता है । यदि आप परिणाम फ़्रेम का divआकार बदलते हैं , तो तत्व तदनुसार आकार बदलता है।

— जेम्स डोनली
स्रोत
18

मेरे पास IE जोश नहीं है, क्या आप मेरे लिए यह परीक्षण कर सकते हैं। धन्यवाद।

<html>
<head>
    <title>Hellomoto</title>
    <style text="text/javascript">
        .hellomoto
        {
            background-color:#ccc;
            position:absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            overflow:auto;
        }
        body
        {
            background-color:#ff00ff;
            padding:0px;
            margin:0px;
            width:100%;
            height:100%;
            overflow:hidden;
        }
        .text
        {
            background-color:#cc00cc;
            height:800px;
            width:500px;
        }
    </style>
</head>
<body>
<div class="hellomoto">
    <div class="text">hellomoto</div>
</div>
</body>
</html>
— Tubbe
स्रोत
आपको 100% तक चौड़ाई निर्धारित करने की आवश्यकता नहीं है
— एडम हर्ट
मुझे नहीं मिला; आप DIV पर 800px की ऊँचाई वाली हार्ड-कोडिंग कर रहे हैं। ओपी चाहता है कि यह गतिशील हो।
— जोश स्टोडोला ने
क्षमा करें, वहाँ (या शीर्ष / बाएँ) में उस चुपके चुपके नहीं देखा था। ठीक है तो यह ठीक है :)
— एडम Harte
साइड नोट के रूप में, आप position: fixedइसके बजाय उपयोग करना चाह सकते हैं यदि पेज स्क्रॉल कर सकता है, लेकिन आपको यह ध्यान में रखना चाहिए कि यह कुछ मोबाइल ब्राउज़र में काम नहीं करता है caniuse.com/#feat=css-fixed
— luiges90
1
मैंने सुना है कि इसे हल करने के अधिक आधुनिक तरीके हैं। @ क्या आप जानते हैं कि क्या यह सच है?
— bzlm
8

क्या मैं सबसे अच्छा सुरुचिपूर्ण रास्ता मिल निम्नलिखित की तरह है, यहाँ सबसे चाल बनाने divके position: fixed।

.mask {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
<html>
  <head>
  <title>Test</title>
  </head>
  <body>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <div class="mask"></div>
    </body>
  </html>
स्निपेट का विस्तार करें

मास्क डेमो

— जेफ तियान
स्रोत
8

यहाँ सबसे छोटा समाधान है, जिसके आधार पर vh। कृपया ध्यान दें कि कुछ पुराने ब्राउज़रोंvh में समर्थित नहीं है ।

सीएसएस:

div {
    width: 100%;
    height: 100vh;
}

HTML:

<div>This div is fullscreen :)</div>
— olieidel
स्रोत
1
यह सुविधाजनक है, लेकिन मोबाइल ब्राउज़रों में समस्याएँ हैं: css-tricks.com/the-trick-to-viewport-units-on-mobile
— अलेक्जेंडर किम
क्यों उलझा हुआ मामला? यह मोबाइल ब्राउजर्स DuckDuckGo 5.54.0, सैमसंग इंटरनेट 11.2.1.3 और क्रोम 81.0.4044.138, साथ ही डेस्कटॉप पर काम करता है; बहादुर 1.10.97, क्रोम 83.0.4103.116 और सफारी 12.1.2।
— जैकब
1

यह मेरे द्वारा उपयोग की जाने वाली चाल है। उत्तरदायी डिजाइनों के लिए अच्छा है। पूरी तरह से काम करता है जब उपयोगकर्ता ब्राउज़र आकार बदलने के साथ गड़बड़ करने की कोशिश करता है।

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        #container {
            position: absolute;
            width: 100%;
            min-height: 100%;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div id="container">some content</div>
</body>
— शार्दूल
स्रोत
-8

दुर्भाग्य से, heightसीएसएस में संपत्ति उतनी विश्वसनीय नहीं है जितनी होनी चाहिए। इसलिए, जावास्क्रिप्ट का उपयोग उपयोगकर्ताओं के व्यूपोर्ट की ऊंचाई के लिए तत्व की ऊंचाई शैली को निर्धारित करने के लिए करना होगा। और हाँ, यह पूर्ण स्थिति के बिना किया जा सकता है ...

<!DOCTYPE html>

<html>
  <head>
    <title>Test by Josh</title>
    <style type="text/css">
      * { padding:0; margin:0; }
      #test { background:#aaa; height:100%; width:100%; }
    </style>
    <script type="text/javascript">
      window.onload = function() {
        var height = getViewportHeight();

        alert("This is what it looks like before the Javascript. Click OK to set the height.");

        if(height > 0)
          document.getElementById("test").style.height = height + "px";
      }

      function getViewportHeight() {
        var h = 0;

        if(self.innerHeight)
          h = window.innerHeight;
        else if(document.documentElement && document.documentElement.clientHeight)
          h = document.documentElement.clientHeight;
        else if(document.body) 
          h = document.body.clientHeight;

        return h;
      }
    </script>
  </head>
  <body>
    <div id="test">
      <h1>Test</h1>
    </div>
  </body>
</html>
— जोश स्टोडोला
स्रोत
1
यदि आप jQuery (अनुशंसित) जैसे पुस्तकालय का उपयोग कर रहे हैं, तो ऊंचाई प्राप्त $(window).height();करना सबसे अच्छा विचार होगा।
— जोश स्टोडोला
वहाँ एक शुद्ध सीएसएस समाधान है?
— मास्क
@ मास्क नहीं, वहाँ नहीं है। अभी तक वैसे भी नहीं।
— जोश स्टोडोला 12:09
@Jed आप के बारे में कैसे एक मिनट ऊंचाई लागू करने की कोशिश: 100% और मैक-सफारी में यह कोशिश करते हैं और शायद हम यहाँ एक समाधान तक पहुँच सकते हैं। मुझे लगता है कि प्लेटफार्मों के बारे में बहस करने से बेहतर होगा।
— जोश स्टोडोला
3
यह IE7, Chrome3 और Safari4 और ओपेरा 10 में काम करता है। सभी ने विंडोज पर परीक्षण किया। दोष यह है कि यह जावास्क्रिप्ट का उपयोग करता है, जो कुछ मास्क से बचना चाहता था (इस उत्तर पर उसकी टिप्पणी देखें)। TandemAdam उत्तर शुद्ध CSS है, और ओपेरा को छोड़कर मैंने सभी ब्राउज़रों पर काम किया है।
— खौफ
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.