Відповіді:
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);«Чисте» рішення CSS фактично можливо зараз, використовуючи медіа-запити:
.yourselector {
max-width: calc(100% - 80px);
}
@media screen and (max-width: 500px) {
.yourselector {
max-width: 500px;
}
}max-height+1
Ні, ви не можете. max()і min()були вилучені з CSS3 Значення та Одиниці. Однак вони можуть бути знову введені у CSS4 Значення та Одиниці . Наразі специфікацій для них немає, і calc()специфікація не згадує, що жодна з них діє в межах calc()функції.
Обхідним способом було б використовувати widthсебе.
max-width: 500px;
width: calc(100% - 80px);500pxабо 100% - 80px. Ваше рішення обмежує максимальну ширину, 500pxнавіть якщо 100% - 80pxвона більша.
min()тому може бути корисним для інших.
Хоча відповідь @ david-mangold вище "була близькою", вона була невірною.
(Ви можете використовувати його рішення, якщо хочете мінімальної ширини, а не максимальної ширини).
Це рішення демонструє, що коментар @ gert-sønderby до цієї відповіді справді спрацьовує:
відповідь мала використовуватись min-width, а не max-width.
Ось що воно повинно було сказати:
min-width: 500px;
width: calc(100% - 80px);Так, використовуйте міні-ширину плюс ширину, щоб імітувати функцію max () .
Ось коден (простіше побачити демонстрацію на 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://drafts.csswg.org/css-values-4/#comp-func .
Прокрутіть до початку сторінки, щоб побачити останню дату редагування (Станом на сьогодні, він востаннє переглянуто 5 квітня 2019 року).
@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>