Calc of max หรือ max ของ Calc ใน CSS

122

เป็นไปได้ไหมที่จะทำสิ่งนี้

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

หรือ

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

ใน CSS?

css

— Arnaud
แหล่งที่มา

คุณได้ลองด้วยตัวเองแล้วหรือยัง?

— Kyle G.

5

ดังที่ @ gert-sønderbyกล่าวเพียงแค่ใช้สองสิ่งนี้: min-width: 500px; ความกว้าง: คำนวณ (100% - 80px);

— paulie4

11

min(), max()และclamp()ที่มีอยู่ในที่สุด!

เริ่มต้นใน Firefox 75, Chrome 79 และ Safari 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);

— ผู้ใช้งาน
แหล่งที่มา

1

สำหรับสิ่งที่คุ้มค่า MS Edge สำหรับ macOS (เวอร์ชัน 81.0.416.68) ยังช่วยให้สิ่งเหล่านี้ หนึ่งจะถือว่า Windows รุ่นยังใช้งานได้ ไม่ทราบเวอร์ชันที่รองรับขั้นต่ำ

— jhelzer

1

Edge ใหม่โดยพื้นฐานแล้ว Chrome เวอร์ชันของมันเป็นไปตาม Chrome ข้อมูลความเข้ากันได้ของเบราว์เซอร์ทั้งหมดอยู่ที่ส่วนท้ายของหน้าที่เชื่อมโยง

— ผู้ใช้

115

โซลูชัน css 'บริสุทธิ์' เป็นไปได้จริงแล้วโดยใช้แบบสอบถามสื่อ:

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

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

— แอนดี้
แหล่งที่มา

3

ทางออกที่ดี! ฉันใช้มันจริงสำหรับความสูงขั้นต่ำเห็นได้ชัดว่าคุณอาจใช้ข้อความค้นหาของสื่อได้max-heightเช่นกัน +1

— avishic

102

ไม่คุณไม่สามารถ. max()และmin()ถูกทิ้งจากค่าและหน่วย CSS3 พวกเขาอาจจะใหม่แนะนำในค่า CSS4 และหน่วยอย่างไร ขณะนี้ยังไม่มีข้อมูลจำเพาะสำหรับพวกเขาและcalc()ข้อมูลจำเพาะไม่ได้ระบุว่าใช้ได้ภายในcalc()ฟังก์ชัน

— เดวิดสตอรี่
แหล่งที่มา

1

คุณสามารถใช้ JavaScript เพื่อรับสไตล์ที่คำนวณ (จริง ๆ แล้วสไตล์ที่ใช้) ขององค์ประกอบ ลบ 80px ออกจากมันและเปรียบเทียบกับ 500 เพื่อดูว่าอันไหนมากกว่า บางอย่างเช่น var val = parseInt (window.getComputedStyle (el, null) .getPropertyValue ("width")) - 80) สำหรับการรับความกว้าง - 80 และ el.style.maxWidth สำหรับการตั้งค่าความกว้างสูงสุด

— David Storey

10

ขอบคุณ. อย่างไรก็ตามฉันต้องการโซลูชัน CSS ที่บริสุทธิ์

— Arnaud

41

เมื่อใดก็ตามที่มีคำถามเกี่ยวกับ CSS และการตอบกลับขึ้นต้นด้วย "คุณสามารถใช้ JavaScript" มันไม่ถูกต้อง มีเหตุผลที่ถูกต้องหลายประการที่ต้องการเก็บโค้ดการนำเสนอทั้งหมดไว้ใน CSS ทั้งหมด - ไม่ใช่ส่วนใหญ่

— b264

8

ดูเหมือนว่า min () และ max () จะกลับมาอยู่ใน CSS Values และ Units Module ระดับ 4 แล้ว (Editor's Draft, 1 กันยายน 2017) Link: drafts.csswg.org/css-values/#calc-notation

— Jakob E

5

แต่มีวิธีแก้ปัญหาให้เลื่อนไปที่คำตอบ @andy ด้านล่าง

— Offirmo

44

วิธีแก้ปัญหาคือการใช้widthตัวเอง

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

— เดวิดมังโกลด์
แหล่งที่มา

3

นี้เป็นความคิดที่ดี แต่ถ้าผมเข้าใจคำถาม @ Arnaud ของอย่างถูกต้องที่เขาต้องการความกว้างสูงสุดของทั้งสองหรือ500px 100% - 80pxโซลูชันของคุณจำกัดความกว้างสูงสุด500pxแม้ว่า100% - 80pxจะใหญ่กว่าก็ตาม

— Theophilus

2

แต่ก็เหมือนกับการใช้min()ดังนั้นอาจเป็นประโยชน์กับผู้อื่น

— Seika85

17

สำหรับฉันแล้วดูเหมือนว่าการใช้ความกว้างต่ำสุดแทนความกว้างสูงสุดในตัวอย่างข้างต้นอาจเทียบเท่ากับพฤติกรรมที่ขอ

— Gert Sønderby

1

คำตอบช่วยฉันเพิ่มระยะขอบให้กับคอนเทนเนอร์แบบยืดหยุ่นเมื่อความกว้างของหน้ามีขนาดเล็ก codepen.io/OBS/pen/wGrRJV

— ofer.sheffer

ฉันโพสต์วิธีแก้ปัญหาที่แสดงความคิดเห็นของ@GertSønderbyเป็นวิธีแก้ปัญหาที่ถูกต้อง

— SherylHohman

13

ในขณะที่คำตอบของ @ david-mangold ข้างต้น "ปิด" นั้นไม่ถูกต้อง
(คุณสามารถใช้วิธีแก้ปัญหาของเขาได้หากคุณต้องการความกว้างขั้นต่ำแทนที่จะเป็นความกว้างสูงสุด )

การแก้ปัญหานี้แสดงให้เห็นว่าการแสดงความคิดเห็น @ Gert-Sonderby ที่จะตอบว่าไม่ต้องการทำงาน:
คำตอบควรจะใช้ไม่ได้ min-widthmax-width

นี่คือสิ่งที่ควรพูด:

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

ใช่ใช้ความกว้างต่ำสุดบวกความกว้างเพื่อจำลองฟังก์ชันmax ()

นี่คือcodepen (ดูการสาธิตบน CodePen ได้ง่ายขึ้นและคุณสามารถแก้ไขได้สำหรับการทดสอบของคุณเอง)

.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 ข้างต้นอาจให้เหตุผลได้ง่ายกว่าและอาจเหมาะสมกว่าในหลาย ๆ กรณีการใช้งาน

นอกจากนี้โปรดทราบว่าในที่สุด a max()และmin()ฟังก์ชันอาจได้รับการแนะนำให้ใช้กับ CSS แต่ ณ เดือนเมษายน 2019 จะไม่ได้เป็นส่วนหนึ่งของข้อมูลจำเพาะ

คุณสามารถตรวจสอบmax()ความเข้ากันได้ของเบราว์เซอร์ได้ที่นี่:
https://developer.mozilla.org/en-US/docs/Web/CSS/max#Browser_compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/max#Browser_compatibility
นี่คือร่างของข้อเสนอ: https://drafts.csswg.org/css-values-4/#comp-func

เลื่อนไปที่ด้านบนสุดของหน้าเพื่อดูวันที่แก้ไขล่าสุด (ณ วันนี้แก้ไขล่าสุดเมื่อวันที่ 5 เมษายน 2019)

— SherylHohman
แหล่งที่มา

1

ทำไมต้องโหวตลง? ทุกอย่างที่ระบุนั้นถูกต้องและมีการเชื่อมโยงและให้เครดิตแหล่งที่มาทั้งหมด

— SherylHohman

1

@Amaud มีทางเลือกอื่นเพื่อให้ได้ผลลัพธ์แบบเดียวกันหรือไม่?

มีวิธี css บริสุทธิ์ที่ไม่ใช่ js ซึ่งจะได้ผลลัพธ์ที่คล้ายกัน คุณจะต้องปรับช่องว่าง / ระยะขอบของคอนเทนเนอร์องค์ประกอบหลัก

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

ขยายข้อมูลโค้ด

— Jicub
แหล่งที่มา