सीएसएस में अधिकतम, या कैल्क का अधिकतम

Question

क्या ऐसा कुछ करना संभव है

max-width: calc(max(500px, 100% - 80px))

या

max-width: max(500px, calc(100% - 80px)))

सीएसएस में?

Comments

क्या आपने उन्हें खुद से आज़माया है?

— काइल जी

जैसा कि @ gert-sønderby ने कहा, बस इन दोनों का उपयोग करें: न्यूनतम-चौड़ाई: 500px; चौड़ाई: कैल्क (100% - 80 पीएक्स);

— पाउली ४

Answer 1

min(), max()और clamp()अंत में उपलब्ध हैं!

फ़ायरफ़ॉक्स 75, ​​क्रोम 79 और सफारी 11.1 (छोड़कर clamp) में शुरू।

min()और max()जितने भी तर्क दें।

clamp()सिंटैक्स है clamp(MIN, VAL, MAX)और इसके बराबर है max(MIN, min(VAL, MAX))।

min()और max()नेस्टेड हो सकता है। उनका उपयोग इसके calc()साथ-साथ बाहर से भी किया जा सकता है, उनमें गणित के भाव भी हो सकते हैं, अर्थात आप calc()उनका उपयोग करते समय इससे बच सकते हैं।

इसलिए मूल उदाहरण के रूप में लिखा जा सकता है:

max-width: max(500px, 100% - 80px);

Comments

इसके लायक क्या है, इसके लिए MS Edge for macOS (संस्करण 81.0.416.68) भी अनुमति देता है। एक मान जाएगा कि विंडोज संस्करण भी काम करता है। मिन समर्थित संस्करण का पता नहीं है।

— झेलज़र

नया एज अनिवार्य रूप से क्रोम है, इसके संस्करण क्रोम का अनुसरण करते हैं। पूर्ण ब्राउज़र संगतता डेटा लिंक किए गए पृष्ठों के अंत में है।

— उपयोगकर्ता

Answer 2

एक 'शुद्ध' सीएसएस समाधान वास्तव में अब मीडिया प्रश्नों का उपयोग कर संभव है:

.yourselector {
  max-width: calc(100% - 80px);
}

@media screen and (max-width: 500px) {
  .yourselector {
    max-width: 500px;
  }
}

Comments

महान समाधान! मैंने इसका उपयोग वास्तव में न्यूनतम ऊंचाई के लिए किया है, जाहिर है कि आप मीडिया प्रश्नों का उपयोग max-height+1

— एविशिक

Answer 3

नहीं तुम नहीं कर सकते। max()और min()CSS3 के मूल्यों और इकाइयों से हटा दिया गया है। हालाँकि उन्हें CSS4 के मूल्यों और इकाइयों में फिर से पेश किया जा सकता है । वर्तमान में उनके लिए कोई युक्ति नहीं है, और calc()कल्पना का उल्लेख नहीं है कि या तो किसी calc()फ़ंक्शन के अंदर मान्य हैं ।

Comments

आप तत्व की गणना शैली (वास्तव में प्रयुक्त शैली) प्राप्त करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं। इसमें से 80px निकालें और यह देखने के लिए 500 से तुलना करें कि कौन अधिक है। कुछ वैर वैली = parseInt (window.getComputedStyle (el, null) .getPropertyValue ("चौड़ाई") - 80) की चौड़ाई प्राप्त करने के लिए - 80 और el.style.maxWhth को अधिकतम-चौड़ाई सेट करने के लिए।

— डेविड स्टोरी

धन्यवाद। हालांकि, मैं एक शुद्ध सीएसएस समाधान पसंद करूंगा।

— अरनौद

जब भी कोई सीएसएस प्रश्न होता है और "आप जावास्क्रिप्ट का उपयोग कर सकते हैं" के साथ एक प्रतिक्रिया शुरू होती है, यह गलत है। CSS में सभी प्रेजेंटेशन कोड रखना चाहते हैं, इसके कई वैध कारण हैं। सभी - सबसे नहीं।

— b264

ऐसा लगता है कि CSS मान और इकाइयाँ में न्यूनतम () और अधिकतम () मॉड्यूल स्तर 4 (संपादक का मसौदा, 1 सितंबर 2017) लिंक: draft.csswg.org/css-values/#calc-notation

— Jakob E

लेकिन समस्या का एक समाधान है, नीचे @ उत्तर पर स्क्रॉल करते रहें

— ऑफमियो

Answer 4

वर्कअराउंड widthस्वयं का उपयोग करना होगा ।

max-width: 500px;
width: calc(100% - 80px);

Comments

यह एक अच्छा विचार है, लेकिन अगर मैं @ अरनौद के प्रश्न को सही ढंग से समझूं, तो वह 500pxया तो अधिकतम-चौड़ाई चाहता है 100% - 80px। आपका समाधान अधिकतम-चौड़ाई को सीमित करता है 500pxभले ही 100% - 80pxवह बड़ा हो।

— थियोफिलस

लेकिन यह min()शायद दूसरों के लिए उपयोगी के रूप में उपयोग के रूप में ही है।

— 15:85 पर Seika85

यह मुझे लगता है कि उपरोक्त उदाहरण में अधिकतम-चौड़ाई के बजाय न्यूनतम चौड़ाई का उपयोग करना, हालांकि पूछे जाने वाले व्यवहार के बराबर हो सकता है।

— गर्ट सोंडर्बी

पृष्ठ की चौड़ाई छोटी हो जाने पर उत्तर ने मुझे फ्लेक्स कंटेनर में एक मार्जिन जोड़ने में मदद की। codepen.io/OBS/pen/wGrRJV

— ofer.sheffer

मैंने एक समाधान पोस्ट किया, जिसमें दिखाया गया है कि @ GertSønderby की टिप्पणी वास्तव में सही समाधान है।

— शेरिलहोमन

Answer 5

जबकि @ david-mangold का उत्तर ऊपर , "बंद" था, यह गलत था।
( यदि आप अधिकतम के बजाय न्यूनतम चौड़ाई चाहते हैं, तो आप उसके समाधान का उपयोग कर सकते हैं चौड़ाई के )।

यह समाधान दर्शाता है कि @ gert-sønderby उस उत्तर पर टिप्पणी करता है काम करता है :
उत्तर का उपयोग किया जाना चाहिए min-width, नहींmax-width ।

इसे यही कहना चाहिए था:

min-width: 500px;
width: calc(100% - 80px);

हाँ, अधिकतम - चौड़ाई का अनुकरण करने के लिए न्यूनतम-चौड़ाई से अधिक चौड़ाई का उपयोग करें () फ़ंक्शन ।

यहाँ कोडपेन ( कोडपेन पर डेमो देखना आसान है, और आप इसे अपने परीक्षण के लिए संपादित कर सकते हैं)।

.parent600, .parent500, .parent400 {
    height: 80px;
    border: 1px solid lightgrey;
}
.parent600 {
    width: 600px;
}
.parent500 {
    width: 500px;
}
.parent400 {
    width: 400px;
}

.parent600 .child, .parent500 .child, .parent400 .child {
    min-width: 500px;
    width: calc(100% - 80px);
    border: 1px solid blue;
    height:60px;
}

.ruler600 {
    width: 600px;
    border: 1px solid green;
    background-color: lightgreen;
    height: 20px;
    margin-bottom: 40px;
}
.width500 {
    height: 20px;
    width: 500px;
    background-color: lightyellow;
    float: left;
}
.width80 {
    height: 20px;
    width: 80px;
    background-color: green;
    float: right;
}

.parent600 .wrong, .parent500 .wrong, .parent400 .wrong {
    max-width: 500px;
    width: calc(100% - 80px);
    border: 1px solid red;
    height:60px;
}

<h2>(Min) min-width correctly gives us the Larger dimension: </h2>
<div class="parent600">
    600px parent
    <div class="child">child is max(500px, 600px - 80px) = max(500px, 520px) = 520px</div>
</div>

<div class="ruler600"><div class="width500">500px</div>20<div class="width80">80px</div></div>

<div class="parent500">
    500px parent
    <div class="child">child is max(500px, 500px - 80px) = max(500px, 420px) = 500px</div>
</div>

<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>

<div class="parent400">
    400px parent (child expands to width of 500px)
    <div class="child">child is max(500px, 400px - 80px) = max(500px, 320px) = 500px</div>
</div>
<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>


<h2>(Max) max-width <em>incorrectly</em> gives us the Smaller dimension: </h2>
<div class="parent400">
    400px parent
    <div class="wrong">child is min(500px, 400px - 80px) = min(500px, 320px) = 320px</div>
</div>
<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>

<div class="parent500">
    500px parent
    <div class="wrong">child is min(500px, 500px - 80px) = min(500px, 420px) = 420px</div>
</div>

<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>

<div class="parent600">
    600px parent
    <div class="wrong">child is min(500px, 600px - 80px) = min(500px, 520px) = 500px</div>
</div>

<div class="ruler600"><div class="width500">500px</div>20<div class="width80">80px</div></div>

उस ने कहा, @ andy का जवाब ऊपर बारे में तर्क करना आसान हो सकता है, और कई उपयोग मामलों में अधिक उपयुक्त हो सकता है।

यह भी ध्यान रखें, कि अंत में एक max()और एक min()समारोह सीएसएस के लिए पेश किया जा सकता है, लेकिन अप्रैल 2019 के रूप में यह कल्पना का हिस्सा नहीं है।

• यहां आप max()ब्राउज़र संगतता की जांच कर सकते हैं :
  https://developer.mozilla.org/en-US/docs/Web/CSS/max#Browser_compatibility ।

• यहाँ प्रस्ताव का प्रारूप दिया गया है:
  https://drafts.csswg.org/css-values-4/#comp-func ।
  अंतिम संशोधन तिथि देखने के लिए पृष्ठ के शीर्ष पर स्क्रॉल करें (आज के अनुसार, इसे अंतिम बार 5 अप्रैल 2019 को संशोधित किया गया था)।

Comments

क्यों होता है पतन? कहा गया सब कुछ सही है, और सभी स्रोतों को क्रेडिट और लिंक किया गया है।

— शेरलहोमन

Answer 6

@Amaud क्या उसी परिणाम के लिए कोई विकल्प है?

एक गैर-जेएस शुद्ध सीएसएस दृष्टिकोण है जो समान परिणाम प्राप्त करेगा। आपको मूल तत्व कंटेनर पैडिंग / मार्जिन समायोजित करने की आवश्यकता होगी।

.parent {
    padding: 0 50px 0 0;
    width: calc(50%-50px);
    background-color: #000;
}

.parent .child {
    max-width:100%;
    height:50px;
    background-color: #999;
}

<div class="parent">
  <div class="child"></div>
</div>