ऊर्ध्वाधर स्क्रॉलबार प्रदर्शित करते हुए शरीर की ऊंचाई 100%

Question 1

जिज्ञासा से बाहर, नीचे दिए गए उदाहरण पर विचार करते हुए, #container div पर मार्जिन होने के कारण ब्राउज़र में वर्टिकल स्क्रॉलबार क्यों दिखाई देता है? कंटेनर शरीर की ऊंचाई की तुलना में ऊंचाई में बहुत छोटा है जो 100% पर सेट है।

मैंने #container को छोड़कर सभी तत्वों के लिए पैडिंग और मार्जिन 0 पर सेट किया है। ध्यान दें कि मैंने जानबूझकर #container div पर पूर्ण स्थिति छोड़ दी है। इस मामले में ब्राउज़र शरीर की ऊंचाई की गणना कैसे कर रहा है और मार्जिन इसे कैसे प्रभावित कर रहा है?

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0; margin:0;}
html, body { height:100%; }
#container
{
  padding:10px;
  margin:50px;
  border:1px solid black;
  width: 200px;
  height: 100px;
}
</style>
</head>
<body>
  <div id='container'>
  </div>
</body>
</html>

JSFiddle पर उदाहरण भी

Question 2

यदि आप ( htmlऔर bodyप्रत्येक को अपना रंग दे रहे हैं) की पृष्ठभूमि पेंट करते हैं , तो आप जल्दी से ध्यान देंगे कि bodyइसे नीचे स्थानांतरित किया जा रहा है #container, और #containerखुद को ऊपर से ऑफसेट नहीं किया गया है body। यह मार्जिन पतन का एक साइड इफेक्ट है , जिसे मैं यहां विस्तार से कवर करता हूं (हालांकि यह जवाब थोड़ा अलग सेटअप का वर्णन करता है)।

यह वह व्यवहार है जिसके कारण स्क्रॉलबार दिखाई दे रहा है, जब से आपने body100% ऊँचाई घोषित की है html। ध्यान दें कि वास्तविक ऊंचाई bodyअप्रभावित है, क्योंकि मार्जिन को कभी भी गणना में शामिल नहीं किया जाता है।

Question 3

थोड़ा देर से, लेकिन शायद यह किसी की मदद करता है।

स्क्रॉलबार हटाने के float: left;लिए जोड़ना #container, जैसा कि W3C कहता है:

• एक फ्लोट किए गए बॉक्स और किसी अन्य बॉक्स के बीच मार्जिन नहीं होता है (फ्लोट और इसके इन-फ्लो बच्चों के बीच भी नहीं)।

Question 4

@ BoltClock के उत्तर के आधार पर, मैंने इसे मार्जिन शून्य करके तय किया ...
इसलिए

html,body, #st-full-pg {
   height: 100%;
   margin: 0;
}

जहां आईडी "st-full-pg" एक पैनल डिव को सौंपा गया है (जिसमें आगे पैनल-हेडिंग और पैनल-बॉडी शामिल है)

Question 5

जोड़ना float:left;अच्छा है, लेकिन केंद्रीय क्षैतिज स्थिति का उपयोग करके हस्तक्षेप करेगाmargin:auto;

यदि आप जानते हैं कि आपका मार्जिन कितना बड़ा है, तो आप कैल्क का उपयोग करके अपनी ऊंचाई प्रतिशत में इसका हिसाब कर सकते हैं:

height: calc(100% - 50px);

ब्राउज़र का समर्थन अच्छा है, लेकिन केवल IE11 + https://caniuse.com/#feat=calc

Question 6

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

इसने मेरे लिए काम किया

Question 7

मुझे एक समाधान मिला है: पैडिंग जोड़ें: 1 पीएक्स 0; शरीर को प्रदर्शित करने के लिए ऊर्ध्वाधर स्क्रॉलबार रोकता है

Question 8

html, body {
    height: 100%;
    overflow: hidden;
}

यदि आप बॉडी स्क्रॉलिंग को हटाना चाहते हैं, तो निम्नलिखित शैली जोड़ें:

body {
    height: 100%;
    overflow: hidden;
}

Question 9

मैंने इस समस्या को तय होने से पहले देखा, जहां आपने bodyएक रैप नामक सभी सामग्री को रखा था । लपेट की शैली को सेट किया जाना चाहिए position: relative; min-height: 100%;। #containerशीर्ष से 50x पर विभक्त करने के लिए और बाएँ के अंदर एक div को 50px पर सेट करने के लिए पैडिंग के साथ रखें। मार्जिन केवल रैप और डिव के साथ काम नहीं करेगा जो हमने अभी बनाया है, लेकिन वे #containerइसके अंदर और सब कुछ में काम करेंगे ।

यहाँ jsfiddle पर मेरा तय है ।

Question 10

@BoltClock से प्रेरित होकर, मैंने यह कोशिश की और यह काम किया, तब भी जब ज़ूम आउट और इन किया।

Browser: Chrome 51

html{
  height: 100%;
}
body{
  height: 100%;
  margin: 0px;
  position: relative;
  top: -20px;
}

मुझे लगता है कि body20px नीचे स्थानांतरित कर दिया गया था।

Question 11

/*removes default margin & padding*/
html, body{
    padding: 0px !important;
    margin: 0px !important;
}

/*sets body height to max; and allows scrollbar as page content grows*/
body{
    min-height: 100vh;
}

Question 12

उन लोगों के लिए जो उत्तर को समझने में आसान हैं, यहां तक कि कोड के नमूने भी शामिल हैं, यह उत्तर ( यहां से कॉपी किया गया ) आपके लिए है।

कोई जावास्क्रिप्ट या निश्चित पिक्सेल मान (जैसे 100px) की आवश्यकता नहीं है, बस, शुद्ध सीएसएस और प्रतिशत।

यदि आपका div बस अपने आप वहां बैठा है, height: 50%तो इसका मतलब शरीर की ऊंचाई का 50% होगा। आम तौर पर, किसी भी दृश्य सामग्री के बिना शरीर की ऊंचाई शून्य होती है, इसलिए इसमें से 50% बस, ठीक है, शून्य है।

यह समाधान है ( इस पर आधारित ) ( backgroundपैडिंग का एक दृश्य प्राप्त करने के लिए लाइनों को अनलॉक्ड करें ):

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html
{
  height: 100%;
  
  /* background: green; */
}

body
{
  /*
    100% the height of <html> minus 1 multiple of the total extra height from the padding of <html>.
    This prevents an unnecessary vertical scrollbar from appearing.
  */
  height: calc(100% - 1em);
  
  /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS. */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}

<div></div>

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

ऊपर लिखा गया था ताकि अभी भी सामान्य पैडिंग हो। आप लाल के आयाम निर्धारित कर सकते हैं divकरने के लिए 100%और अभी भी हर तरफ / अंत पर गद्दी देखते हैं। यदि आप यह पैडिंग नहीं चाहते हैं, तो इसका उपयोग करें (हालांकि यह अच्छा नहीं लगता है, मैं आपको पहले उदाहरण के साथ रहने की सलाह देता हूं):

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html, body
{
  height: 100%;
}

/* You can uncomment it but you wouldn't be able to see it anyway. */

/*
html
{
  background: green;
}
*/

body
{
  margin: 0;
  
 /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}

<div></div>

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

Question 13

overflow: hidden;Html और बॉडी में जोड़ें ।

html, body {
  height: 100%;
  overflow: hidden;
}

Question 14

मुझे एक त्वरित समाधान मिला: सेट की ऊंचाई 100% के बजाय 99.99% करने की कोशिश करें