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

813

HTML / CSS के साथ, मैं एक ऐसा तत्व कैसे बना सकता हूँ जिसकी चौड़ाई और / या ऊँचाई 100% है, यह मूल तत्व है और अभी भी उचित पैडिंग या मार्जिन है?

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

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

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

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

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

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

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

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

css

— Toji
स्रोत

मैंने इन दो समाधानों को सबसे विश्वसनीय पाया है: http://www.xs4all.nl/~peterned/examples/csslayout1.html http://themaninblue.com/experiment/footerStickAlt/ क्या आप कोई विशिष्ट HTML है कि हम देख सकते हैं और साथ खेल सकते हैं?

— निक प्रेस्टा

stackoverflow.com/questions/3931187/…

— बेन

755

मैंने सीखा कि " प्रो HTML और सीएसएस डिजाइन पैटर्न " को पढ़ने के लिए इस तरह की चीजें कैसे की जाती हैं । के 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 के द्वारा टिप्पणी

— फ्रैंक श्वाइटमैन
स्रोत

42

शानदार समाधान, इसे एक बुकमार्क किया जाएगा। बस जल्दी से इसे jsfiddle.net/Rpdr9 में किसी ऐसे व्यक्ति के लिए जोड़ा गया जो लाइव डेमो चाहता है। आशा है कि आप बुरा नहीं मानेंगे

— Nooshu

16

जबकि @Toji ने IE संगतता की परवाह नहीं की, मुझे दुर्भाग्य से करना है। यह समाधान प्रारंभ में IE6 के तहत काम नहीं करता था। पेज पर डीन एडवर्ड्स के IE9.js को जोड़ने से यह काम हो गया। अब मुझे सिर्फ यह आशा और प्रार्थना करनी है कि रिश्तेदार / निरपेक्ष स्थिति किसी बच्चे के तत्व में कुछ नहीं है ...

— क्रिस्टोफर पार्कर

24

-1 (हालांकि ऐसा लगता है कि मैं यहां अल्पसंख्यक हूं: P)। यह मानता है कि बॉक्स पूरी तरह से तैनात हो सकता है; लोग पहले से ही पोज का इस्तेमाल करते हैं: एब्स जैसा है, उन्हें इस बारूद की जरूरत नहीं है। इस उदाहरण को लें: एक div "पैनल" जिसके अंदर कई divs वर्ग "पैनल" है। "पैनलों" में {अतिप्रवाह: छिपा हुआ है; ऊँचाई: 300px;}, और "पैनल" में अलग-अलग सामग्री / सामग्री-ऊँचाई है, जिसमें {सीमा: # 000 ठोस 1px; बाईंओर तैरना; मार्जिन-सही: 10px;}। किसी भी बिंदु पर सीमाओं को खोए बिना "पैनल" की ऊंचाई सभी "पैनल" बनाएं। "पैनल" div पॉस नहीं हो सकता है: यहाँ अनुपस्थित होगा। @ मार्को का समाधान इस परिदृश्य के लिए काम करता है, हालाँकि।

— इटर्निकोड

8

अरे वाह, मैं समझ गया। top:0, bottom:0, अनिवार्य तत्व बाहर "खिंचाव"। मैं केवल इसके साथ काम करने के लिए प्राप्त कर सकते हैं position:absolute, हालांकि

— मैट

7

क्या आप सिर्फ top:20px;bottom:20px;left:20px;right:20px;हाशिये का उपयोग करने के बजाय ऐसा नहीं कर सकते थे?

— चौबे

391

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

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

box-sizing: border-box;

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

— मार्को जरदीम
स्रोत

45

आखिरकार! मैं लगभग 10 वर्षों से इस सटीक सुविधा की प्रतीक्षा कर रहा हूं। दया आईई 7 इसे समर्थन नहीं करता है, लेकिन मुझे हमेशा लगता है कि जो लोग अभी भी IE का उपयोग कर रहे हैं वे सुंदर लेआउट के लायक नहीं हैं।

— क्रोनोकली

2

इसने मेरे लिए iPhone / Safari और Android के डिफ़ॉल्ट ब्राउज़र पर काम किया, जबकि ऊपर दिए गए बिल्कुल समाधान ने काम नहीं किया।

— स्पड

18

यह मूल रूप से IE के क्विरक्स मोड बॉक्स मॉडल के समान है । मुझे यह अजीब लगता है कि IE पर सभी लोग कैसे नफरत करते हैं border-box, अभी तक हर किसी का हीरो है :)

— मैट ग्रीर

14

FYI करें, बॉक्स-आकार के लिए उपसर्ग ब्राउज़र अब सभी butmoz के लिए छोड़ दिया गया है। Paulirish.com/2012/box-sizing-border-box-ftw और अच्छी चर्चा के लिए टिप्पणियाँ देखें

— aponzani

3

हाँ! यह सही जवाब है! 100% ऊंचाई अब अपने माता-पिता के सापेक्ष चीजों को सही ढंग से बिखेरती है, बिना छींटे। अगर मैं कर सकता तो मैं एक मिलियन + 1 देता।

— एंड्रयू माओ

65

समाधान ऊंचाई और चौड़ाई का उपयोग नहीं करना है! ऊपरी, बाएँ, दाएँ, नीचे का उपयोग करके आंतरिक बॉक्स संलग्न करें और फिर मार्जिन जोड़ें।

.box {margin:8px; position:absolute; top:0; left:0; right:0; bottom:0}

<div class="box" style="background:black">
  <div class="box" style="background:green">
    <div class="box" style="background:lightblue">
      This will show three nested boxes. Try resizing browser to see they remain nested properly.
    </div>
  </div>
</div>

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

— amolk
स्रोत

6

वोट अप क्योंकि आप तकनीकी रूप से सही हैं, लेकिन यह भी मूल रूप से फ्रैंक के रूप में एक ही उत्तर है (जो मुझे लगता है कि वहाँ बाहर के स्लोपियर ब्राउज़रों के लिए थोड़ा अधिक अनुकूल है।)

— Toji

39

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

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

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

— ब्रायन एडरर
स्रोत

6

अच्छा समाधान है। बस ब्राउज़र समर्थन की जांच करना याद रखें: क्या मैं कैल्क ()

— ब्रेट पोस्टिन

5

क्या यह वास्तव में आपको 100% चौड़ाई नहीं देगा और प्रत्येक PLUS 5px पैडिंग को ऊंचाई देगा, क्योंकि पैडिंग प्रभावी रूप से क्रमशः 10px तत्व को व्यापक और बड़ा बना देगा?

अंत में एक अच्छा समाधान, और उनमें से बाकी की तरह नहीं है कि आप शीर्ष, दाएं, नीचे और बाएं से 0 हो जाएं, जो केवल स्थिति के साथ काम करेगा: निरपेक्ष;

— गिल एप्सटेन

मुझे लगता है कि सही है: #myDiv {चौड़ाई: calc (100% - 10px); ऊंचाई: कैल्क (100% - 10 पीएक्स); गद्दी: 5 पीएक्स; } बाएं से 5 और दाएं से 5 = 10, ऊपर से 5 और नीचे से 5 = 10

— क्रिस पी

21

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

min-height सामग्री सहित पृष्ठ की कुल ऊँचाई को संदर्भित करता है ताकि पृष्ठ पर ऐसी सामग्री हो जो सामग्री 1024px की न्यूनतम ऊँचाई से अधिक हो: 100% सभी सामग्री को शामिल करने के लिए खिंच जाएगी।

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

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

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

<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>

— एलेक्स
स्रोत

4

@ एलेक्स: लेकिन क्या आंतरिक div (पैडेड एक) बाहरी div की ऊंचाई का 100% बनाता है। मेरा अनुभव यह रहा है कि आपको एक बड़ी पूर्ण-ऊँचाई के भीतर थोड़ा छोटा विभाजन मिलता है।

— लॉरेंस Dol

8

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>

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

— स्टिकर
स्रोत

7

यह सीएसएस के एकमुश्त मुहावरों में से एक है - मुझे अभी तक तर्क को समझना नहीं है (यदि कोई जानता है, तो pls स्पष्ट करें)।

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

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

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

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

— लॉरेंस डोल
स्रोत

कोई तर्क नहीं है, बस क्या हुआ जहां ब्राउज़र लगातार व्यवहार की ओर अभिसरण करना शुरू कर दिया। मेरी प्रतिक्रिया में उल्लिखित पुस्तक देखें।

— फ्रैंक श्वेतेरमैन

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

— मारार्टिनस

5

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

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

JSBIN

एक अन्य विकल्प यह होगा कि बॉक्स-साइज़िंग प्रॉपर्टी का उपयोग किया जाए। दोनों के साथ केवल समस्या यह होगी कि वे IE7 में काम नहीं करेंगे।

— user1721135
स्रोत

4

एक अन्य समाधान: आप मार्जिन के साथ-साथ आकारों के लिए प्रतिशत इकाइयों का उपयोग कर सकते हैं। उदाहरण के लिए:

.fullWidthPlusMargin {
    width: 98%;
    margin: 1%;
}

यहां मुख्य मुद्दा यह है कि मूल तत्व के आकार के साथ मार्जिन थोड़ा बढ़ेगा / घटेगा। संभवत: आपके द्वारा पसंद की जाने वाली कार्यक्षमता निरंतर रहने के लिए मार्जिन के लिए है और रिक्ति में परिवर्तन को भरने के लिए बच्चे के बढ़ने / सिकुड़ने के लिए बाल तत्व है। इसलिए, आपके प्रदर्शन के लिए आपको कितनी कड़ी जरूरत पर निर्भर करता है, यह समस्याग्रस्त हो सकता है। (मैं भी एक छोटे से मार्जिन के लिए जाना चाहता हूं, जैसे 0.3%)।

— ktbiz
स्रोत

3

Flexbox के साथ एक समाधान (IE11 पर काम कर रहे): ( या jsfiddle पर देखें )

<html>
  <style>
    html, body {
      height: 100%; /* fix for IE11, not needed for chrome/ff */
      margin: 0; /* CSS-reset for chrome */
    }
  </style>
  <body style="display: flex;">
    <div style="background-color: black; flex: 1; margin: 25px;"></div>
  </body>
</html>

( वास्तविक समस्या के लिए CSS- रीसेट जरूरी नहीं है।)

महत्वपूर्ण हिस्सा है flex: 1( display: flexमाता-पिता के साथ संयोजन में)। मजेदार रूप से पर्याप्त, सबसे प्रशंसनीय स्पष्टीकरण मुझे पता है कि फ्लेक्स संपत्ति कैसे काम करती है एक प्रतिक्रिया-मूल दस्तावेज से आती है, इसलिए मैं इसे वैसे भी संदर्भित करता हूं :

(...) फ्लेक्स: 1, जो सभी उपलब्ध स्थान को भरने के लिए एक घटक को बताता है, समान माता-पिता के साथ अन्य घटकों के बीच समान रूप से साझा किया जाता है

— पुटजी सैन
स्रोत

2

फ्रैंक के उदाहरण ने मुझे थोड़ा भ्रमित किया - यह मेरे मामले में काम नहीं करता था क्योंकि मैं अभी तक अच्छी तरह से स्थिति को नहीं समझता था। यह ध्यान रखना महत्वपूर्ण है कि मूल कंटेनर तत्व को एक गैर-स्थिर स्थिति की आवश्यकता होती है (उन्होंने इसका उल्लेख किया लेकिन मैंने इसे अनदेखा कर दिया, और यह उनके उदाहरण में नहीं था)।

यहां एक उदाहरण है जहां बच्चे को दी गई गद्दी और एक सीमा - माता-पिता को 100% भरने के लिए पूर्ण स्थिति का उपयोग करता है। माता-पिता सामान्य प्रवाह में रहते हुए बच्चे की स्थिति के लिए संदर्भ का एक बिंदु प्रदान करने के लिए सापेक्ष स्थिति का उपयोग करते हैं - अगला तत्व "अधिक-सामग्री" प्रभावित नहीं होता है:

#box {
    position: relative;
    height: 300px;
    width: 600px;
}

#box p {
    position: absolute;
    border-style: dashed;
    padding: 1em;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

<div id="box">
  <p>100% height and width!</p>
</div>
<div id="more-content">
</div>

सीएसएस स्थिति को जल्दी से सीखने के लिए एक उपयोगी लिंक

— पीटर त्सेंग
स्रोत

0

पेज बॉडी मार्जिन के बजाए डिव के आसपास बॉर्डर

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

बॉर्डर-बॉक्स काम नहीं करता था, और इस तरह की साधारण ज़रूरत के लिए निश्चित स्थिति गलत थी।

मैंने अपने कंटेनर में एक बॉर्डर जोड़ना समाप्त कर दिया, बजाय पेज के शरीर के मार्जिन पर भरोसा करने के लिए - यह इस तरह दिखता है:

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

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

— क्रिस रान्डेल
स्रोत

0

यह display: blockसबसे तेज़ तरीके का डिफ़ॉल्ट व्यवहार है जिसे आप इसे 2020 में ठीक कर सकते हैं display: 'flex', मूल तत्व का सेट करना है और उदाहरण के लिए 20px तो उसके सभी बच्चों की ऊंचाई के सापेक्ष 100% ऊँचाई होगी।

— Freestyle09
स्रोत

0

जोड़ने के लिए -webkit और -moz अधिक उपयुक्त होगा

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

— user3113626
स्रोत

-2

  <style type="text/css">
.stretchedToMargin {
    position:absolute;
    width:100%;
    height:100%;

}
</style>

— मुजस्सिर नासिर
स्रोत