在CSS中计算最大值或计算最大值

122

是否可以做这样的事情

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

要么

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

在CSS中？

css 
— 阿诺
source
你自己尝试过吗？
— 凯尔G.
5
正如@gert-sønderby所说，只需使用以下两个：min-width：500px; 宽度：calc（100％-80px）;
— paulie4 '16

Answers:

11

min()，max()和clamp()终于可以！

在Firefox 75，铬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);
— 用户
source
1
就其价值而言，适用于macOS的MS Edge（版本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;
  }
}
— 安迪
source
3
很好的解决方案！我实际上已将其用于最小身高，显然您也可以使用媒体查询来进行max-height+1
— avishic
102

你不能。max()并且min()已从CSS3值和单位中删除。但是，可以在CSS4值和单位中重新引入它们。当前没有针对它们的calc()规范，并且该规范未提及它们在calc()函数内部均有效。

— 大卫·斯托里
source
1
您可以使用JavaScript获取元素的计算样式（实际上是使用的样式）。从中删除80px并将其与500进行比较，看哪个更大。像var val = parseInt（window.getComputedStyle（el，null）.getPropertyValue（“ width”））-80）获取宽度-80和el.style.maxWidth来设置最大宽度。
— 大卫·斯托里
10
谢谢。但是，我希望使用纯CSS解决方案。
— Arnaud
41
任何时候只要有CSS问题，响应都以“您可以使用JavaScript”开头，这是不正确的。想要将所有演示代码都保留在CSS中有许多有效的理由。全部-不是大多数。
— b264
8
似乎min（）和max（）回到了CSS值和单位模块第4级（编辑草案，2017年9月1日）链接：drafts.c​​sswg.org/css-values/#calc-notation
— Jakob E
5
但是有一个解决问题的方法，继续滚动到下面的@andy答案
— Offirmo
44

一种解决方法是使用width自身。

max-width: 500px;
width: calc(100% - 80px);
— 大卫·曼戈尔德
source
3
这是个好主意，但如果我正确理解@Arnaud的问题，他希望使用500px或的最大宽度100% - 80px。您的解决方案限制了最大宽度来500px即使100% - 80px是较大的。
— Theophilus 2015年
2
但这与使用相同，min()因此可能对其他人有所帮助。
— Seika85 '16
17
在我看来，在上面的示例中使用min-width而不是max-width可能等效于所要求的行为。
— GertSønderby'16
1
一旦页面宽度变小，答案就可以帮助我在flex容器中添加边距。codepen.io/OBS/pen/wGrRJV
— ofer.sheffer 2016年
我发布了一个解决方案，证明@GertSønderby的评论确实是正确的解决方案。
— SherylHohman
13

虽然@大卫-曼戈尔德的回答以上，是“关闭”这是不正确的。
（如果您需要最低限度的价格，可以使用他的解决方案宽度而不是最大宽度，宽度）。

此解决方案表明@gert-sønderby对该答案的评论确实起作用：
答案应已使用min-width，而不是max-width。

这是应该说的： 

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

是的，使用min-width和width来模拟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年4月，它尚未成为规范的一部分。

— 雪莉·霍曼（SherylHohman）
source
1
为什么要下票？所陈述的一切均正确无误，所有来源均已链接并归功于此。
— SherylHohman
1

@Amaud 是否有替代方法才能获得相同的结果？

有一种非js的纯CSS方法可以达到类似的结果。您需要调整父元素容器的填充/边距。

.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>
展开摘要

— 吉库
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.