सीमा की मोटाई को प्रतिशत में कैसे सेट करें?

Question

किसी तत्व की सीमा-चौड़ाई प्रतिशत में कैसे सेट करें? मैंने वाक्य रचना की कोशिश की

border-width:10%;

लेकिन यह काम नहीं करता है।

कारण जो मैं border-widthप्रतिशत में सेट करना चाहता हूं , मेरे पास एक तत्व है width: 80%;और height: 80%;, और मैं चाहता हूं कि तत्व पूरे ब्राउज़र विंडो को कवर करे, इसलिए मैं सभी सीमाओं को 10% सेट करना चाहता हूं। मैं यह दो तत्वों की विधि के साथ नहीं कर रहा हूं, जिसमें एक को दूसरे के पीछे तैनात किया जाएगा और सीमा के रूप में कार्य किया जाएगा, क्योंकि तत्व की पृष्ठभूमि पारदर्शी है, और इसके पीछे एक तत्व की स्थिति पारदर्शिता को प्रभावित करेगी।

मुझे पता है कि यह जावास्क्रिप्ट के माध्यम से किया जा सकता है, लेकिन मैं एक सीएसएस केवल विधि की तलाश कर रहा हूं, यदि संभव हो तो।

Comments

border-widthमूल्य के रूप में प्रतिशत का समर्थन नहीं करता है। तुम उन्हें, px, पूर्व आदि का उपयोग कर सकते हैं, लेकिन आप border-width10% का सेट क्यों करना चाहते हैं ?

— सेंटेंशियो

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

— जुका के। कोर्पेला

स्क्रीन का प्रतिशत। तत्व पूरी तरह से तैनात है, इसलिए स्क्रीन का प्रतिशत

— पीयूष कुशवाहा

@ JukkaK.Korpela: क्या कोई मामला है जब प्रतिशत कंटेनर के अलावा किसी और चीज का जिक्र कर रहा है? फिर सवाल क्यों?

— रॉबर्ट कोरिटनिक

@PeeyushKushwaha, क्या आप सुनिश्चित हैं कि स्क्रीन का अर्थ (चौड़ाई) है, न कि खिड़की की चौड़ाई?

— जुक्का के। कोर्पेला

Answer 1

सीमा प्रतिशत का समर्थन नहीं करती है ... लेकिन यह अभी भी संभव है ...

जैसा कि दूसरों ने CSS विनिर्देशन की ओर इशारा किया है , प्रतिशत सीमाओं पर समर्थित नहीं हैं:

'border-top-width',
'border-right-width',
'border-bottom-width',
'border-left-width'
  Value:          <border-width> | inherit
  Initial:        medium
  Applies to:     all elements
  Inherited:      no
  Percentages:    N/A
  Media:          visual
  Computed value: absolute length; '0' if the border style is 'none' or 'hidden'

जैसा कि आप देख सकते हैं यह प्रतिशत कहता है : एन / ए ।

गैर-स्क्रिप्टेड समाधान

आप अपनी आवरण सीमाओं के साथ अपनी प्रतिशत सीमाओं का अनुकरण कर सकते हैं जहाँ आप होंगे:

1. background-colorअपने इच्छित सीमा रंग के लिए रैपर तत्व सेट करें
2. रैपर तत्व के paddingप्रतिशत में सेट करें (क्योंकि वे समर्थित हैं)
3. अपने तत्वों background-colorको सफेद में सेट करें (या इसके लिए जो भी आवश्यक हो)

यह किसी भी तरह आपकी प्रतिशत सीमाओं का अनुकरण करेगा। यहां 25% चौड़ाई वाले बॉर्डर वाले तत्व का उदाहरण दिया गया है जो इस तकनीक का उपयोग करता है।

HTML उदाहरण में उपयोग किया जाता है

.faux-borders {
    background-color: #f00;
    padding: 1px 25%; /* set padding to simulate border */
}
.content {
    background-color: #fff;
}

<div class="faux-borders">
    <div class="content">
        This is the element to have percentage borders.
    </div>
</div>

समस्या: आपको यह जानना होगा कि यह तब और अधिक जटिल होगा जब आपके तत्व में कुछ जटिल पृष्ठभूमि इस पर लागू होती है ... खासकर यदि वह पृष्ठभूमि पूर्वज डोम पदानुक्रम से विरासत में मिली है। लेकिन अगर आपका यूआई काफी सरल है, तो आप इसे इस तरह से कर सकते हैं।

स्क्रिप्टेड समाधान

@BoltClock ने स्क्रिप्टेड समाधान का उल्लेख किया है जहां आप तत्व आकार के अनुसार सीमा की चौड़ाई की गणना कर सकते हैं।

यह jQuery का उपयोग करते हुए अत्यंत सरल स्क्रिप्ट के साथ एक ऐसा उदाहरण है ।

var el = $(".content");
var w = el.width() / 4 | 0; // calculate & trim decimals
el.css("border-width", "1px " + w + "px");

.content { border: 1px solid #f00; }

<div class="content">
    This is the element to have percentage borders.
</div>

लेकिन आपको इस बात से अवगत होना होगा कि आपको हर बार अपने कंटेनर के आकार में परिवर्तन (यानी ब्राउज़र विंडो आकार बदलना) सीमा चौड़ाई को समायोजित करना होगा । रैपर तत्व के साथ मेरा पहला वर्कअराउंड बहुत सरल लगता है क्योंकि यह इन स्थितियों में स्वचालित रूप से चौड़ाई समायोजित करेगा।

स्क्रिप्टेड समाधान का सकारात्मक पक्ष यह है कि यह मेरे पिछले गैर-स्क्रिप्टेड समाधान में उल्लिखित पृष्ठभूमि की समस्याओं से ग्रस्त नहीं है।

Comments

गैर-स्क्रिप्टेड समाधान के साथ समस्या: set your elements background-color to white (or whatever it needs to be)यह अर्ध-पारदर्शी है ताकि पृष्ठभूमि छवि दिखाने के लिए, किसी अन्य तत्व का उपयोग करने से उद्देश्य नष्ट हो जाएगा।

— पीयूष कुशवाहा

@PeeyushKushwaha: मैंने अपने उत्तर में इस मुद्दे को वैसे भी इंगित किया है। इसलिए मैंने वैकल्पिक स्क्रिप्टेड समाधान भी प्रदान किया है जो इससे ग्रस्त नहीं है। लेकिन पृष्ठभूमि के आधार पर स्क्रिप्टिंग के बिना इस मुद्दे को हल करना अभी भी संभव हो सकता है । लेकिन यह बेहद अलग-अलग स्थिति पर निर्भर करता है।

— रॉबर्ट कोरिटनिक

गैर-स्क्रिप्टेड समाधान काम नहीं करेगा यदि आपको सीमा सामग्री पर पारदर्शिता की आवश्यकता है (क्योंकि रैपर पृष्ठभूमि के माध्यम से दिखाई देगा)।

— कैमरेन जू

गैर-स्क्रिप्टेड समाधान के साथ एक और मुद्दा: विभिन्न सीमा रंग संभव नहीं हैं (उदाहरण के लिए border-left-color: green)

— Aloso

मैंने किसी तरह पहले तुम्हारे जैसे समाधान के बारे में सोचा था। मुझे नहीं पता था कि अगर बैकग्राउंड के साथ डिव और अल्टरनेटिव के अंदर एक और डिव के साथ पैडिंग होती तो अच्छा था। अब इसे मान्य करना प्रतीत होता है। मेरे मामले में, यह वही है जो मुझे चाहिए था।

— cram2208

Answer 2

आप भी उपयोग कर सकते हैं

border-left: 9vw solid #F5E5D6;
border-right: 9vw solid #F5E5D6;     

या

border: 9vw solid #F5E5D6;

Comments

यह केवल यहाँ पर समाधान है जो दूर से उचित है।

— सेराओसे

यह वह नहीं है जो ओपी ने हालांकि पूछा। ओपी वर्तमान तत्व प्रतिशत में एक सीमा चाहता है, व्यूपोर्ट प्रतिशत में नहीं।

— ऑट्रा

@autra, ठीक यही ओपी ने पूछा: "मैं चाहता हूं कि तत्व पूरे ब्राउज़र विंडो को कवर करे"।

— क्वर्टी २० ’१

ओह ठीक है, ठीक है। ऐसा इसलिए है क्योंकि ओपी ने वास्तव में उनके मुद्दे के बारे में गलत सवाल पूछा था, पहले से ही प्रतिशत में सीमा निर्धारित करना उनकी विशेष समस्या का एकमात्र समाधान था। मुझे वह मूर्ख लगा, माफ करना :-)

— ऑटरा

यह सबसे अच्छा जवाब है!

— डेमियन रोमितो

Answer 3

तो यह एक पुराना सवाल है, लेकिन अभी भी एक जवाब की तलाश में उन लोगों के लिए, सीएसएस संपत्ति बॉक्स-आकार यहाँ अनमोल है:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit  */
-moz-box-sizing: border-box;    /* Firefox, other Gecko         */
box-sizing: border-box; 

इसका अर्थ है कि आप Div की चौड़ाई प्रतिशत में सेट कर सकते हैं, और जिस भी बॉर्डर को आप Div से जोड़ते हैं, उस प्रतिशत में शामिल किया जाएगा। इसलिए, उदाहरण के लिए, निम्नलिखित div की चौड़ाई के अंदर 1px सीमा जोड़ देगा:

div { box-sizing:border-box; width:50%; border-right:1px solid #000; }         

यदि आप अधिक जानकारी चाहते हैं: http://css-tricks.com/box-sizing/

Comments

यह उपयोगी है जब आप सीमा-चौड़ाई के बारे में परवाह नहीं करते हैं और केवल पूर्ण स्क्रीन को कवर करने के बारे में, लेकिन अन्यथा नहीं।

— पीयूष कुशवाहा

यही वह मूल रूप से पूछ रहा था - पूरी स्क्रीन को कवर करना, लेकिन एक सीमा की चौड़ाई सहित। आप यहां बॉर्डर की चौड़ाई को किसी भी पिक्सेल राशि में बदल सकते हैं और यह आपकी div प्रतिशत चौड़ाई को फेंक नहीं देगा।

— किम्बर्ली फॉक्स

मैं यह कहना चाह रहा था कि यह समाधान मूल प्रश्न में समस्याओं में से एक को संबोधित करता है, जो पूरे स्क्रीन को बिना किसी अतिप्रवाह के कवर कर रहा है। लेकिन यह तब मददगार नहीं होता जब आप स्क्रीन की चौड़ाई / ऊंचाई के प्रतिशत के संदर्भ में अपनी सीमा निर्धारित करना चाहते हैं

— पीयूष कुशवाहा

यह एक महान समाधान और दृष्टिकोण है, धन्यवाद किम्बर्ली! वास्तव में एक तत्व के बाहर छायांकन में मदद की जहां अंदर पारदर्शी था।

— ट्रैविस जे

Answer 4

border-widthसीएसएस में प्रतिशत मान लागू नहीं होते हैं । यह युक्ति में सूचीबद्ध है ।

आपको तत्व की चौड़ाई या जो भी लंबाई की मात्रा की आवश्यकता है, उसके प्रतिशत की गणना pxकरने के लिए और तत्व की सीमाओं के समान या इसके परिणाम को लागू करने के लिए जावास्क्रिप्ट का उपयोग करने की आवश्यकता होगी ।

Comments

@Robert Koritnik: बिल्कुल :) मुझे लगा कि मैं तो मैं अब यह संपादित कर लिया है ... स्पष्ट करने के लिए है कि मेरे जवाब की जरूरत

— BoltClock

@ रोबर्ट: हो सकता है कि मैं इसे आजमाऊं ... और यदि आवश्यक हो तो मैं इसे वापस लाऊंगा।

— BoltClock

Answer 5

आप पिक्सल के बजाय प्रतिशत के लिए एम का उपयोग कर सकते हैं,

उदाहरण:

border:10PX dotted #c1a9ff; /* In Pixels */
border:0.75em dotted #c1a9ff; /* Exact same as above in Percentage */

Comments

em एक प्रतिशत है, लेकिन यह फ़ॉन्ट आकार के सापेक्ष है, न कि युक्त बॉक्स / तत्व की ऊँचाई या चौड़ाई।

— efreed

कम से कम मेरे लिए पूर्ण पिक्सेल के लिए एम दौर।

— एक्यू जूल 30'16

Answer 6

आधुनिक ब्राउज़र vh और vw इकाइयों का समर्थन करते हैं, जो विंडो व्यूपोर्ट का एक प्रतिशत हैं।

तो आपके पास विंडो आकार के प्रतिशत के रूप में शुद्ध सीएसएस सीमाएँ हो सकती हैं:

border: 5vw solid red;

इस उदाहरण को आज़माएँ और विंडो की चौड़ाई बदलें; खिड़की का आकार बदलते ही बॉर्डर मोटाई बदल जाएगा। box-sizing: border-box;उपयोगी भी हो सकता है।

Answer 7

बॉक्स साइज़िंग
ने बॉक्स को आकार देने के लिए बॉर्डर बॉक्स box-sizing: border-box;को सेट किया और चौड़ाई को 100% और बॉर्डर के लिए एक निश्चित चौड़ाई सेट किया, फिर एक छोटी स्क्रीन के लिए एक मिनट की चौड़ाई जोड़ें ताकि बॉर्डर पूरी स्क्रीन से आगे न निकल जाए

Answer 8

आप एक स्पैन का उपयोग करके एक कस्टम बॉर्डर बना सकते हैं। एक वर्ग के साथ एक अंतराल बनाएं (उस दिशा को निर्दिष्ट करना जिसमें सीमा जा रही है) और एक आईडी:

<html>
    <body>
        <div class="mdiv">
            <span class="VerticalBorder" id="Span1"></span>
            <header class="mheader">
                <span class="HorizontalBorder" id="Span2"></span>
            </header>
        </div>
    </body>
</html>

उसके बाद, आप सीएसएस के पास जाकर करने के लिए वर्ग सेट position:absolute, height:100%(लंबवत बॉर्डर के लिए), width:100%(क्षैतिज बॉर्डर के लिए), margin:0%और background-color:#000000;। जो आवश्यक हो, उसमें कुछ और जोड़ें:

body{
    margin:0%;
}

div.mdiv{
    position:absolute;
    width:100%;
    height:100%;
    top:0%;
    left:0%;
    margin:0%;
}

header.mheader{
    position:absolute;
    width:100%;
    height:20%; /* You can set this to whatever. I will use 20 for easier calculations. You don't need a header. I'm using it to show you the difference. */
    top:0%;
    left:0%;
    margin:0%;
}

span.HorizontalBorder{
    position:absolute;
    width:100%;
    margin:0%;
    background-color:#000000;
}

span.VerticalBorder{
    position:absolute;
    height:100%;
    margin:0%;
    background-color:#000000;
}

फिर आईडी सेट है कि मेल खाती है करने के लिए class="VerticalBorder"करने के लिए top:0%;, left:0%;, width:1%;। (के बाद से MDiv की चौड़ाई 100% पर mheader की चौड़ाई के बराबर होता है, चौड़ाई क्या आप इसे सेट की 100% हो जाएगा आप 1% की चौड़ाई सेट करते हैं सीमा खिड़की की चौड़ाई का 1% होगी)। आईडी सेट के अनुरूप है class="HorizontalBorder"करने के लिए top:99%, (चूंकि यह एक हैडर कंटेनर शीर्ष स्थान यह शीर्ष लेख के अनुसार में है को संदर्भित करता है में है। यह + ऊंचाई अगर आप इसे नीचे तक पहुँचना चाहते हैं 100% में जुड़ने चाहिए) left:0%;और height:1%(चूँकि mdiv की ऊंचाई mheader की ऊंचाई से 5 गुना अधिक है [100% = 100, 20% = 20, 100/20 = 5], ऊँचाई 20% होगी जो आप इसे सेट करते हैं। यदि आप ऊँचाई सेट करते हैं। 1% सीमा होगी। खिड़की की ऊंचाई का .2%) यहाँ है कि यह कैसा दिखेगा:

span#Span1{
    top:0%;
    left:0%;
    width:.4%;
}
span#Span2{
    top:99%;
    left:0%;
    width:1%;
}

अस्वीकरण: यदि आप एक छोटे से पर्याप्त आकार में विंडो का आकार बदलते हैं, तो सीमाएं गायब हो जाएंगी। एक सीमा के आकार की टोपी के लिए एक समाधान होगा यदि खिड़की को एक निश्चित बिंदु पर आकार दिया जाता है। मैंने जो किया था यह रहा:

window.addEventListener("load", Loaded);

function Loaded() {
  window.addEventListener("resize", Resized);

  function Resized() {
    var WindowWidth = window.innerWidth;
    var WindowHeight = window.innerHeight;
    var Span1 = document.getElementById("Span1");
    var Span2 = document.getElementById("Span2");
    if (WindowWidth <= 800) {
      Span1.style.width = .4;
    }
    if (WindowHeight <= 600) {
      Span2.style.height = 1;
    }
  }
}

यदि आपने सब कुछ सही किया है, तो यह देखना चाहिए कि यह इस लिंक में कैसा है: https://jsfiddle.net/umhgkvq8/12/ कुछ अजीब कारण से, बॉर्डर jsfiddle में गायब हो जाएगा, लेकिन यदि आप इसे एक ब्राउज़र में लॉन्च नहीं करते हैं ।

Answer 9

कैल्क () विनिर्देश पर एक नज़र डालें । यहाँ उपयोग का एक उदाहरण है:

border-right:1px solid;
border-left:1px solid;
width:calc(100% - 2px);