मैं CSS में चौड़ाई = 100% - 100px कैसे कर सकता हूँ?

153

CSS में, मैं ऐसा कुछ कैसे कर सकता हूं:

width: 100% - 100px;

मुझे लगता है कि यह काफी सरल है, लेकिन यह दिखाने वाले उदाहरणों को खोजना थोड़ा कठिन है।

html css

— fmsf
स्रोत

1

लिंक किए गए प्रश्न stackoverflow.com/questions/11093943/… एक दिलचस्प, लेकिन पूरी तरह से पिछड़े संगत जवाब नहीं देता है, शायद आप उस पर भी एक नज़र डालना चाहेंगे।

— 11684

5

इस प्रश्न को पार करने वाले किसी भी व्यक्ति के लिए चाड ने उत्तर दिया कि आधुनिक ब्राउज़र width: calc(100% - 100px);नीचे दिए गए कुछ उत्तरों का समर्थन करता है और मुझे उम्मीद है कि पूछने वाला अपने प्रश्न को अद्यतन करेगा :) :)

— एंडर्स एम।

278

आधुनिक ब्राउज़र अब इसका समर्थन करते हैं:

width: calc(100% - 100px);

समर्थित ब्राउज़र संस्करणों की सूची देखने के लिए चेकआउट करें: क्या मैं CSS यूनिट मान के रूप में calc () का उपयोग कर सकता हूं?

एक jQuery की गिरावट है : css चौड़ाई: calc (100% -100px); jquery के उपयोग से वैकल्पिक

— काग़ज़ का टुकड़ा
स्रोत

13

मैंने पाया कि जब मैं calc(100% - 6px)उदाहरण के लिए इसे प्रदर्शित कर calc(94%)रहा था, तो मुझे इसे निम्नानुसार बचना था और अब यह काम करता हैwidth: calc(~"100% - 6px");

— nsilva

12

जागरूक रहें, आपके पास -(या +) वर्ण के आसपास व्हाट्सएप होना चाहिए । यह काम करता है: calc(100% - 100px); और यह नहीं है:calc(100%-100px);

— मुक्त

मैं थोड़ा आश्चर्यचकित हूं कि तत्व के पैडिंग को स्वचालित रूप से 2x करने के लिए कोई विकल्प नहीं है, जो आमतौर पर एक बहुत ही सामान्य usecase होगा। जैसे, मुझे अंत करना है padding: 0.25em; width: calc(100% - 2 * 0.25em - 2em);, और 0.25emअगर इसे संशोधित किया जाना है, तो अब दो स्थानों पर बदलना होगा ।

— cnst 8'19

बहुत धन्यवाद, यह भी ध्यान रखना चाहूंगा कि यह इसके अतिरिक्त काम करता है: (100% + 100px)

— विक्टर मेलग्रेन

99

आप के साथ एक div घोंसला सकता है margin-left: 50px;और margin-right: 50px;एक के अंदर <div>के साथ width: 100%;?

— एरिक टेनेक
स्रोत

4

चौड़ाई: कैल्क (100% - 100px); इसके बजाय यह सही उत्तर है।

— सुशांत

17

आप यह कोशिश कर सकते हैं ...

<!--First Solution-->
width: calc(100% - 100px);
<!--Second Solution-->
width: calc(100vh - 100px);

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

vw: व्यूपोर्ट की चौड़ाई

vh: व्यूपोर्ट ऊंचाई

— barış çıracı
स्रोत

पहला समाधान सही है, कंटेनर खिड़की नहीं हो सकता है और इसलिए 100vh 100% के बराबर नहीं हो सकता है

— बेन टालिडोरोस

1

मैंने पाया कि जब मैं calc(100% - 6px)उदाहरण के लिए इसका उपयोग कर रहा था calc(94%), तो मैं इसे निम्नानुसार बच रहा था और अब यह काम करता हैwidth: calc(~"100% - 6px");

— nsilva

4

मेरा कोड, और यह IE6 के लिए काम करता है:

<style>
#container {margin:0 auto; width:100%;}
#header { height:100px; background:#9c6; margin-bottom:5px;}
#mainContent { height:500px; margin-bottom:5px;}
#sidebar { float:left; width:100px; height:500px; background:#cf9;}
#content { margin-left:100px; height:500px; background:#ffa;}

</style>

<div id="container">
  <div id="header">header</div>
  <div id="mainContent">
    <div id="sidebar">left</div>
    <div id="content">right 100% - 100px</div>
  <span style="display:none"></span></div>
</div>

यहाँ छवि विवरण दर्ज करें

— lbsweek
स्रोत

6

क्या है कि जावास्क्रिप्ट के लिए?

— फैज

3

आपको अपनी सामग्री div के लिए एक कंटेनर रखने की आवश्यकता है जिसे आप 100% होना चाहते हैं - 100px

#container {
   width: 100%
}
#content {
   margin-right:100px;
   width:100%;
}

<div id="container">
  <div id="content">
      Your content here
  </div>
</div>

</div>यदि आपकी सामग्री div अतिप्रवाह है, तो आपको अंतिम से ठीक पहले एक समाशोधन div को जोड़ने की आवश्यकता हो सकती है।

<div style="clear:both; height:1px; line-height:0">&nbsp;</div>

— aleemb
स्रोत

1

यह काम नहीं करेगा। सामग्री की चौड़ाई 100% होगी: jsfiddle.net/cuezK/1

— gilly3

2

बॉडी मार्जिन को 0 पर सेट करना, बाहरी कंटेनर की चौड़ाई 100% और आंतरिक कंटेनर का उपयोग 50px बाएं / दाएं मार्जिन के साथ काम करना प्रतीत होता है।

<style>
body {
    margin: 0;
    padding: 0;
}

.full-width
{
    width: 100%;
}

.innerContainer
{
    margin: 0px 50px 0px 50px;
}
</style>

<body>
  <div class="full-width" style="background-color: #ff0000;">
    <div class="innerContainer" style="background-color: #00ff00;">
      content here
    </div>
  </div>
</body>

— tvanfosson
स्रोत

2

बूटस्ट्रैप पैनल के साथ काम करना, मैं हेडर पैनल में "डिलीट" लिंक को कैसे रखना चाहता था, जो कि लंबे पड़ोसी तत्व द्वारा अस्पष्ट नहीं होगा। और यहाँ समाधान है:

एचटीएमएल:

<div class="with-right-link">
    <a class="left-link" href="#">Long link header Long link header</a>
    <a class="right-link" href="#">Delete</a>
</div>

सीएसएस:

.with-right-link { position: relative; width: 275px; }
a.left-link { display: inline-block; margin-right: 100px; }
a.right-link { position: absolute; top: 0; right: 0; }

बेशक आप अपने इंडेंटेशन के अनुसार "टॉप" और "राइट" मानों को संशोधित कर सकते हैं। स्रोत

— अर्तुर लोगवोव
स्रोत

2

यह मेरे लिए तभी काम करने लगा जब मैंने सभी रिक्त स्थान की जाँच की। तो, यह इस तरह काम नहीं किया: width: calc(100%- 20px)या calc(100%-20px)पूरी तरह से साथ काम किया width: calc(100% - 20px)।

— अलीना बेबीकेवा
स्रोत

1

क्या आप कर सके:

margin-right: 50px;
margin-left: 50px;

संपादित करें: मेरा समाधान गलत है। Aric TenEyck द्वारा पोस्ट किए गए समाधान में 100% चौड़ाई के साथ एक div का उपयोग करने का सुझाव दिया गया है और फिर हाशिये का उपयोग करके किसी अन्य div को घोंसला बनाना अधिक सही लगता है।

— टीना ओरोजी
स्रोत

3

यदि आप ऐसा करते हैं, तो क्या आप 100% + 100px की कुल चौड़ाई के साथ समाप्त नहीं होंगे?

— एडम क्रूम

: ओ (मुझे क्षमा करें। क्या मुझे अपनी पोस्ट को हटा देना चाहिए या क्या मुझे इसे छोड़ देना चाहिए और नीचे के वोटों को इसे नीचे

— लाने

1

डाउन वोट आमतौर पर आपको अपने पद को साफ करने के लिए प्रोत्साहित करने के लिए होते हैं ताकि आप नकारात्मक वोटों से खोए हुए बिंदुओं को वापस पा सकें। यदि आपको पता है कि आपका समाधान गलत है तो आप वोट के साथ या उसके बिना हटा सकते हैं या इसे सही करने के लिए अपडेट कर सकते हैं।

— दोपहर 06

@AdamCrume - नहींं। यह केवल मामला होगा यदि आप भी निर्दिष्ट करते हैं width:100%। जब तक आप स्पष्ट रूप से निर्दिष्ट करके width, floatया पूर्ण स्थिति का उपयोग करके एक div स्वचालित रूप से कंटेनर को भर नहीं देंगे, जैसे कि । एक मार्जिन को डिव में जोड़ने से सिर्फ इसके कंटेनर को भरने का कारण होगा, मार्जिन द्वारा निर्दिष्ट राशि कम।

— gilly3

@aleemb - इस मामले में डाउनवोट उन उपयोगकर्ताओं द्वारा किया जाता है जो सीएसएस को नहीं समझते हैं क्योंकि यह उत्तर पूरी तरह से सही है।

— gilly3

1

बाहरी div पर पैडिंग से वांछित प्रभाव मिलेगा।

<html>
<head>
<style>
    #outer{
        padding: 0 50px;
        border:1px solid black; /*for visualization*/
    }

    #inner{
        border:1px solid red; /*for visualization*/
    }
</style>
</head>
<body>
<div id="outer">
    <div id="inner">
        100px smaller than outer
    </div>
</div>
</body>
</html>

— जोश बुश
स्रोत

1

2 तकनीकें हैं जो इस सामान्य परिदृश्य के लिए काम आ सकती हैं। प्रत्येक में अपनी कमियां हैं लेकिन दोनों कई बार उपयोगी हो सकते हैं।

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

.bb{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;     
    width: 100%;
    height:200px;
    padding: 50px;
}

यहाँ इस पर एक उत्कृष्ट लेख है: http://css-tricks.com/box-sizing/ और यहाँ एक fiddle http://jsfiddle.net/L3Rvw/ है

और फिर स्थिति है: निरपेक्ष

.padded{
    position: absolute;
    top: 50px;
    right: 50px;
    left: 50px;
    bottom: 50px;
    background-color: #aefebc;
}

http://jsfiddle.net/Mw9CT/1/

न तो निश्चित रूप से परिपूर्ण हैं, बॉक्स-साइज़िंग वास्तव में सवाल को फिट नहीं करता है क्योंकि तत्व वास्तव में 100% चौड़ाई है, बजाय 100% - 100px (हालांकि एक बच्चा div होगा)। और पूर्ण स्थिति निश्चित रूप से हर स्थिति में उपयोग नहीं की जा सकती है, लेकिन आमतौर पर ठीक है जब तक कि माता-पिता की ऊंचाई निर्धारित नहीं हो जाती।

— डेव
स्रोत

0

CSS का उपयोग एनिमेशन, या घटनाओं पर किसी भी शैली संशोधन के लिए नहीं किया जा सकता है।

एकमात्र तरीका एक जावास्क्रिप्ट फ़ंक्शन का उपयोग करना है, जो किसी दिए गए तत्व की चौड़ाई वापस कर देगा, फिर, इसे 100px तक घटाएं, और नई चौड़ाई का आकार सेट करें।

मान लें कि आप jQuery का उपयोग कर रहे हैं, तो आप ऐसा कुछ कर सकते हैं:

oldWidth = $('#yourElem').width();
$('#yourElem').width(oldWidth-100);

और देशी जावास्क्रिप्ट के साथ:

oldWidth = document.getElementById('yourElem').clientWidth;
document.getElementById('yourElem').style.width = oldWidth-100+'px';

हम मानते हैं कि आपके पास 100% के साथ एक css शैली सेट है;

— बोरिस गुएरी
स्रोत

0

क्या आप मानक मोड का उपयोग कर रहे हैं? यह समाधान उस पर निर्भर करता है जो मुझे लगता है।

यदि आप 2 कॉलम बनाने की कोशिश कर रहे हैं, तो आप कुछ ऐसा कर सकते हैं:

<div id="outer">
    <div id="left">
        sidebar
    </div>
    <div id="main">
        lorem ispsum etc... 
    </div>
</div>

फिर इसे स्टाइल करने के लिए CSS का उपयोग करें:

div#outer
{
    width:100%;
    height: 500px;
}

div#left
{
    width: 100px;
    height: 100%;
    float:left;
    background: green;
}

div#main
{
   width: auto;
   margin-left: 100px; /* same as div#left width */
   height: 100%;
   background:red;
}

यदि आप 2 कॉलम नहीं चाहते हैं, तो आप संभवतः निकाल सकते हैं <div id="left">

— hannson
स्रोत

0

<div style="width: 200px; border: 1px solid red;">
    <br>
    <div style="margin: 0px 50px 0px 50px; border: 1px solid blue;">
        <br>
    </div>
    <br>
</div>

— आर सी।
स्रोत

0

आप LESS का उपयोग करके देख सकते हैं , जो एक जावास्क्रिप्ट फ़ाइल है जो आपके CSS को पूर्व-संसाधित करती है ताकि आप अपने CSS में तर्क और चर शामिल कर सकें। तो आपके उदाहरण के लिए, LESS में आप width: 100% - 100px;वास्तव में वही हासिल करना चाहेंगे जो आप चाहते थे :)

— जॉन
स्रोत

-1

आप नहीं कर सकते।

हालाँकि, आप समान परिणाम को प्रभावित करने के लिए मार्जिन का उपयोग कर सकते हैं।

— Traingamer
स्रोत

-1

यह काम:

margin-right:100px;
width:auto;

— user1552559
स्रोत

1

क्या आप अपने उत्तर में स्पष्टीकरण जोड़ सकते हैं?

— मिशैल पेरोलाकोव्स्की

मैंने कोशिश की है: calc (100% -100px) और परिणाम सभी प्लेटफार्मों / ब्राउज़रों के अनुरूप नहीं हैं, तो मैंने वास्तव में सरलीकृत और सही उपयोग करने की कोशिश की: 100px; चौड़ाई: ऑटो; और यह काम किया ...

— user1552559

कैल्क CSS3 घटक है और यह सीएसएस उन ब्राउज़रों पर काम करेगा जो CSS3 का समर्थन करते हैं।

— सुशांत

-2

संक्षिप्त उत्तर है कि आप सीएसएस में ऐसा नहीं करते हैं। इंटरनेट एक्सप्लोरर में सीएसएस एक्सप्रेशंस नामक किसी चीज के लिए समर्थन है, लेकिन यह मानक नहीं है और निश्चित रूप से उदाहरण के लिए फायरफॉक्स जैसे अन्य ब्राउज़रों द्वारा समर्थित नहीं है।

आप जावास्क्रिप्ट में ऐसा करने से बेहतर होंगे।

— प्रवीण भाग्य
स्रोत

हाँ, मुझे लगता है कि मुझे इसे जावास्क्रिप्ट में रखना होगा, मैं कुछ कोड को हटा रहा हूँ और जावास्क्रिप्ट को हटाना चाहता था जो कि tks कर रहा था।

— fmsf

1

यदि आप इसे टाला जा सकता है तो कृपया इसे जावास्क्रिप्ट में न करें। एचटीएमएल + सीएसएस मुश्किल हो सकता है और समाधान स्पष्ट नहीं हो सकता है, लेकिन यह संभवतः आपकी ज़रूरत के लगभग कुछ भी कर सकता है। स्थिर लेआउट के लिए जावास्क्रिप्ट का उपयोग करना लगभग हमेशा एक बुरा विचार है।

— निकोल