बनाओ <body> पूरी स्क्रीन भरें?

129

मैं अपने वेबपेज पर पृष्ठभूमि के रूप में एक रेडियल ग्रेडिएंट का उपयोग कर रहा हूं, जैसे:

background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000));

यह काम करता है, लेकिन जब सामग्री पूरे पृष्ठ को नहीं भरती है तो ग्रेडिएंट कट जाता है। मैं <body>तत्व को पूरे पृष्ठ को हमेशा कैसे बना सकता हूं ?

html css radial-gradients

— रिया-
स्रोत

2

और body { width: 100%; height: 100%; }काम नहीं करता है?

— एलेक्स

बॉडी टैग के लिए सही सीएसएस लागू होता है? यह मेरे लिए अप-टू-डेट क्रोम jsfiddle.net/kdjFD/embedded/result में बहुत अच्छा काम करता है । आप किस ब्राउज़र का परीक्षण कर रहे हैं?

— लेरॉय

4

नहीं, body { width: 100%; height: 100%; }काम नहीं करता है। मुझे लगता है कि मुझे इसे <html>भी लागू करना होगा ।

— Ry-

पुराने -webkit- वाक्य रचना का उपयोग न करें। W3C सिंटैक्स

— टिम गुयेन

@TimNguyen: यह प्रश्न तीन साल पहले पूछा गया था, जब उसके लिए कोई ब्राउज़र समर्थन नहीं था।

— Ry-

201

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

— capdragon
स्रोत

18

ऐसा लगता है कि यह सब html { height: 100%; }वास्तव में लेता है ।

— Ry-

30

न तो html { height: 100%; }है और न ही body { height: 100%; }मेरे लिए काफी था (ओपेरा एक परीक्षण के रूप में शामिल) क्या काम सबसे अच्छा था html, body { min-height: 100%; }मिनट-ऊंचाई की ऊंचाई का उपयोग करने के बजाय मेरी पृष्ठभूमि सफेद छोड़ दिया / ओ डब्ल्यू पृष्ठभूमि रंग लागू किया जब मैं अपने पृष्ठ के मध्य में कुछ सिमटने divs का विस्तार किया। min-heightतय हो गया कि

— स्टीफन पी

1

यह समस्या केवल पृष्ठभूमि का उपयोग करते समय ही क्यों हो रही है: रैखिक ढाल और सरल पृष्ठभूमि के साथ नहीं

— एएसएन

@ASEN क्या आपने कभी पता लगाया कि ऐसा क्यों है?

— लैस

2

अगर यह अभी भी किसी के लिए काम नहीं कर रहा है तो बस बदल 100%दें 100vh।

— पोलीमॉर्फिज़्मप्रिंस

27

हमारी साइट पर हमारे पास ऐसे पृष्ठ हैं जहां सामग्री स्थिर है, और पृष्ठ जहां यह AJAX के साथ लोड किया गया है। एक पृष्ठ (एक खोज पृष्ठ) पर, ऐसे मामले थे जब AJAX परिणाम पृष्ठ को भरने से अधिक होगा, और ऐसे मामले जहां यह कोई परिणाम नहीं लौटाएगा। पृष्ठ को भरने के लिए पृष्ठभूमि छवि के लिए सभी मामलों में हमें निम्नलिखित सीएसएस लागू करना था:

html {
   margin: 0px;
   height: 100%;
   width: 100%;
}

body {
   margin: 0px;
   min-height: 100%;
   width: 100%;
}

heightके लिए htmlऔर min-heightके लिए body।

— jwatts1980
स्रोत

1

न ही उनकी जरूरत है width: 100%;।

— Ry-

1

प्रदर्शन के कारण: ब्लॉक प्रकृति

— वेलन

यह भी margin: 0;पर्याप्त है, यह निर्दिष्ट करने की आवश्यकता नहीं है कि आप किस यूनिट के शून्य का उपयोग करते हैं

— केमकोडिंग

15

जैसा कि अन्य उत्तरों में से किसी ने भी मेरे लिए काम नहीं किया, मैंने इसका समाधान दूसरों के लिए एक उत्तर के रूप में पोस्ट करने का निर्णय लिया, जो एक ही समस्या का भी समाधान पाया। एचटीएमएल और बॉडी दोनों के साथ सेट होने की जरूरत है min-heightया ग्रेडिएंट शरीर की ऊंचाई को नहीं भरेगा।

मुझे इसका सही उत्तर प्रदान करने के लिए स्टीफन पी की टिप्पणी मिली ।

html {
    /* To make use of full height of page*/
    min-height: 100%;
    margin: 0;
}
body {
    min-height: 100%;
    margin: 0;
}

पृष्ठभूमि भरने शरीर की ऊंचाई

जब मेरे पास html (या html और शरीर) की ऊँचाई 100% हो,

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

पृष्ठभूमि शरीर को भरने नहीं

— समुदाय
स्रोत

12

मुझे html और शरीर दोनों के लिए 100% आवेदन करना था।

— htrufan
स्रोत

4

शरीर के स्तर पर माप की व्यूपोर्ट (vh, vm) इकाइयों का उपयोग करने का प्रयास करें

HTML, बॉडी {मार्जिन: 0; गद्दी: 0; } शरीर {न्यूनतम ऊंचाई: 100vh; }

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

मेरे पास शरीर के भीतर तत्वों पर vh, vm इकाइयों का उपयोग करते हुए विचित्र परिणाम हैं, खासकर जब पुन: साइज़िंग।

— माइक राइट
स्रोत

1

मुझे लगता है कि काफी हद तक सही तरीका है, इस पर सीएसएस लगाना:

html
{
    overflow: hidden;
}

body
{
    margin: 0;
    box-sizing: border-box;
}

html, body
{
    height: 100%;
}

— मार्टिन विटेके
स्रोत

इसके महत्वपूर्ण भाग छह साल पहले स्वीकार किए गए उत्तर के समान हैं, क्षमा करें।

— Ry-

1

मैंने ऊपर दिए गए सभी समाधानों की कोशिश की और मैं उनमें से किसी को भी बदनाम नहीं कर रहा हूं, लेकिन मेरे मामले में, उन्होंने काम नहीं किया।

मेरे लिए, समस्या इसलिए थी क्योंकि <header>टैग margin-topमें 5em और 5 <footer>-मार्जिन का मार्जिन था। मैंने उन्हें हटा दिया और इसके बजाय कुछ padding(ऊपर और नीचे, क्रमशः) डाल दिया । मुझे यकीन नहीं है कि अगर मार्जिन की जगह समस्या का एक आदर्श समाधान था, लेकिन मुद्दा यह है कि, अगर आपके पहले और अंतिम तत्वों में <body>कुछ मार्जिन है, तो आप इसे देखना चाहते हैं और उन्हें हटा सकते हैं।

मेरे htmlऔर bodyटैग में निम्नलिखित शैलियाँ थीं

body {
  line-height: 1;
  min-height: 100%;
  position: relative; }

html {
  min-height: 100%;
  background-color: #3c3c3c; }

— दिनिका सक्सेना
स्रोत

1

यदि आपके पास एक सीमा या पैडिंग है, तो समाधान

html, body {
    margin: 0;
    height: 100%;
}
body {
    border: solid red 5px;
    border-radius: 2em;
}

स्निपेट का विस्तार करें

अपूर्ण प्रतिपादन प्रस्तुत करता है

सीमा या गद्दी की उपस्थिति में इसे ठीक करने के लिए

इसके बजाय का उपयोग करें

html, body {
    margin: 0;
    height: 100%;
}
body {
    box-sizing: border-box;
    border: solid red 5px;
    border-radius: 2em;
}

स्निपेट का विस्तार करें

जैसा कि मार्टिन ने बताया, हालांकि overflow: hiddenइसकी जरूरत नहीं है।

(2018 - क्रोम 69 और IE 11 के साथ परीक्षण किया गया)

— Vrokipal
स्रोत

आपका उत्तर केवल आपके लिए प्रासंगिक है, और क्योंकि आपने bodyटैग में सीमा जोड़ी है । उस सीमा के बिना, bodyव्यूपोर्ट के बिल्कुल 100% को भर देगा, आप उदाहरण के लिए पृष्ठभूमि रंग के साथ देख सकते हैं। 7 साल पहले स्वीकार किए गए उस सवाल का सही जवाब अभी भी मान्य है।

— निस

-1

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

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title> Fullscreen Div </title>
  <style>
  .test{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
  }
  </style>
</head>
<body>
  <div class='test'>Some text</div>
</body>
</html>

— GigiProve
स्रोत

सवाल नहीं था, क्षमा करें। खुशी है कि आप कुछ है कि आप के लिए काम करता है, हालांकि पाया।

— Ry-