tutorial - what is css in english




पैडिंग/मार्जिन के साथ सीएसएस 100% ऊंचाई (8)

पेज बॉडी मार्जिन की बजाय div के चारों ओर सीमा

एक और समाधान - मैं बस अपने पृष्ठ के किनारे के चारों ओर एक साधारण सीमा चाहता था, और जब सामग्री उससे छोटी थी तो मैं 100% ऊंचाई चाहता था।

सीमा-बॉक्स काम नहीं किया, और निश्चित स्थिति के लिए निश्चित स्थिति गलत लग रही थी।

पृष्ठ के शरीर के मार्जिन पर भरोसा करने के बजाय, मैं अपने कंटेनर पर एक सीमा जोड़ना समाप्त कर दिया - ऐसा लगता है:

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

.container {
    width: 100%;
    min-height: 100%;
    border: 8px solid #564333;
}

यह मुझे कुछ दिनों के लिए पागल कर रहा है, लेकिन हकीकत में यह एक समस्या है जिसे मैंने पिछले कुछ सालों से बंद कर दिया है: एचटीएमएल / सीएसएस के साथ मैं एक तत्व कैसे बना सकता हूं जिसमें चौड़ाई और / या ऊंचाई जो उसके मूल तत्व का 100% है और अभी भी उचित पैडिंग या मार्जिन है?

"उचित" से मेरा मतलब है कि यदि मेरा मूल तत्व 200px लंबा है और मैं height = 100% padding = 5px साथ निर्दिष्ट करता हूं तो मुझे उम्मीद है कि मुझे सभी पक्षों पर border = 5px साथ एक 190px उच्च तत्व प्राप्त करना चाहिए, जो मूल तत्व में अच्छी तरह से केंद्रित है ।

अब, मुझे पता है कि मानक बॉक्स मॉडल निर्दिष्ट नहीं करता है कि यह काम करना चाहिए (हालांकि मैं जानना चाहता हूं कि क्यों, बिल्कुल ...), इसलिए स्पष्ट उत्तर काम नहीं करता है:

#myDiv {
    width: 100%
    height: 100%;
    padding: 5px;
}

लेकिन मुझे ऐसा लगता है कि इस प्रभाव को मनमाने ढंग से आकार के माता-पिता के लिए विश्वसनीय रूप से उत्पादन करने का कुछ तरीका होना चाहिए। क्या किसी को यह (प्रतीत होता है सरल) कार्य पूरा करने के तरीके के बारे में पता है?

ओह, और रिकॉर्ड के लिए मुझे आईई संगतता में बहुत दिलचस्पी नहीं है, इसलिए (उम्मीद है) चीजों को थोड़ा आसान बनाना चाहिए।

संपादित करें: चूंकि एक उदाहरण के लिए पूछा गया था, यहां सबसे सरल है जिसके बारे में मैं सोच सकता हूं:

<html style="height: 100%">
    <body style="height: 100%">
        <div style="background-color: black; height: 100%; padding: 25px"></div>
    </body>
</html>

चुनौती तब होती है जब ब्लैक बॉक्स को सभी किनारों पर 25 पिक्सेल पैडिंग के साथ दिखाने के लिए स्क्रॉलबार की आवश्यकता होती है।


एक अन्य समाधान डिस्प्ले का उपयोग करना है: तालिका जिसमें एक अलग बॉक्स मॉडल व्यवहार है।

आप माता-पिता को ऊंचाई और चौड़ाई निर्धारित कर सकते हैं और इसे विस्तार किए बिना पैडिंग जोड़ सकते हैं। बच्चे में 100% ऊंचाई और चौड़ाई पैडिंग से कम है।

JSBIN

एक और विकल्प बॉक्स आकार के propperty का उपयोग करना होगा। दोनों के साथ केवल समस्या ही वे आई 7 में काम नहीं करेंगे।


कैल्क () संपत्ति के साथ बेहतर तरीका है। तो आपका मामला इस तरह दिखेगा:

#myDiv {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    padding: 5px;
}

सरल, साफ, कोई कामकाज नहीं। बस सुनिश्चित करें कि आप मूल्यों और ऑपरेटर (उदाहरण के लिए (100% -5 पीएक्स) के बीच की जगह को न भूलें जो सिंटैक्स को तोड़ देगा। आनंद लें!


डब्ल्यू 3 सी स्पेक ऊंचाई के अनुसार देखने योग्य क्षेत्र की ऊंचाई को संदर्भित किया गया है जैसे 1280x1024 पिक्सेल रिज़ॉल्यूशन मॉनिटर 100% ऊंचाई = 1024 पिक्सेल।

न्यूनतम ऊंचाई उस पृष्ठ पर सामग्री सहित पृष्ठ की कुल ऊंचाई को संदर्भित करती है जहां सामग्री 1024px न्यूनतम ऊंचाई से बड़ी है: 100% सभी सामग्री को शामिल करने के लिए फैल जाएगी।

दूसरी समस्या यह है कि यानी 6 को छोड़कर अधिकांश आधुनिक ब्राउज़रों में ऊंचाई और चौड़ाई में पैडिंग और सीमा जोड़ दी जाती है (यानी 6 वास्तव में काफी तार्किक है लेकिन यह spec के अनुरूप नहीं है)। इसे बॉक्स मॉडल कहा जाता है। तो अगर आप निर्दिष्ट करते हैं

min-height: 100%;
padding: 5px; 

यह वास्तव में ऊंचाई के लिए आपको 100% + 5 पीएक्स + 5 पीएक्स देगा। इसके चारों ओर जाने के लिए आपको एक रैपर कंटेनर चाहिए।

<style>
    .FullHeight { 
       height: auto !important; /* ie 6 will ignore this */
       height: 100%;            /* ie 6 will use this instead of min-height */
       min-height: 100%;        /* ie 6 will ignore this */
    }

    .Padded {
       padding: 5px;
    }
</style>

<div class="FullHeight">
   <div class="Padded">
      Hello i am padded.
   </div
</div>

मैंने सीखा है कि " प्रो एचटीएमएल और सीएसएस डिजाइन पैटर्न " पढ़ने के इस तरह की चीजें कैसे करें। display:block div लिए डिफ़ॉल्ट प्रदर्शन मान है, लेकिन मैं इसे स्पष्ट करना चाहता हूं। कंटेनर सही प्रकार होना चाहिए; position विशेषता fixed , relative , या absolute

.stretchedToMargin {
  display: block;
  position:absolute;
  height:auto;
  bottom:0;
  top:0;
  left:0;
  right:0;
  margin-top:20px;
  margin-bottom:20px;
  margin-right:80px;
  margin-left:80px;
  background-color: green;
}
<div class="stretchedToMargin">
  Hello, world
</div>

Nooshu की comment से पहेली


यह सीएसएस की पूरी तरह से मूर्खतापूर्ण बातों में से एक है - मुझे अभी तक तर्क समझना नहीं है (अगर कोई जानता है, कृपया बताएं)।

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

ध्यान दें, ऊंचाई सेट करना भी ब्राउज़र के बीच कुख्यात असंगत है।

मैंने पोस्ट करने के बाद से सीखा एक और बात यह है कि प्रतिशत कंटेनर की लंबाई से संबंधित है , यानी यह चौड़ाई है, जो ऊंचाई के लिए प्रतिशत को और भी बेकार बनाता है।

आजकल, वीएच और वीडब्ल्यू व्यूपोर्ट इकाइयां अधिक उपयोगी हैं, लेकिन अभी भी शीर्ष स्तर के कंटेनरों के अलावा विशेष रूप से उपयोगी नहीं हैं।


CSS3 में एक नई प्रॉपर्टी है जिसका उपयोग आप बॉक्स मॉडल की चौड़ाई / ऊंचाई की गणना करने के तरीके को बदलने के लिए कर सकते हैं, इसे बॉक्स-साइजिंग कहा जाता है।

इस संपत्ति को "सीमा-बॉक्स" मान के साथ सेट करके यह आपके द्वारा लागू किए जाने वाले तत्व को तब तक फैलाता है जब आप पैडिंग या सीमा जोड़ते हैं। यदि आप 100px चौड़ाई और 10px पैडिंग के साथ कुछ परिभाषित करते हैं, तो यह अभी भी 100px चौड़ा होगा।

box-sizing: border-box;

ब्राउज़र समर्थन के लिए यहां देखें । यह आईई 7 और निचले स्तर के लिए काम नहीं करता है, हालांकि, मेरा मानना ​​है कि डीन एडवर्ड की IE7.js लिए समर्थन जोड़ती है। का आनंद लें :)


1. padding साथ पूर्ण ऊंचाई

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  padding: 50px;
  box-sizing: border-box;
  background: silver;
}
<div class="container">Hello world.</div>

2. margin साथ पूर्ण ऊंचाई

body {
  margin: 0;
}
.container {
  min-height: calc(100vh - 100px);
  margin: 50px;
  background: silver;
}
<div class="container">Hello world.</div>

3. border साथ पूर्ण ऊंचाई

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  border: 50px solid pink;
  box-sizing: border-box;
  background: silver;
}
<div class="container">Hello world.</div>





css