Расчет макс. Или макс. Вычислений в CSS

122

Можно ли сделать что-то подобное

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

или

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

в CSS?

css

— Arnaud
источник

Вы сами их пробовали?

— Кайл Г.

5

Как сказал @ gert-sønderby, просто используйте эти два: min-width: 500px; ширина: calc (100% - 80 пикселей);

— 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 Values and Units. Однако они могут быть повторно введены в CSS4 Values and Units . В настоящее время для них нет спецификации, и в calc()спецификации не упоминается, что они действительны внутри calc()функции.

— Дэвид Стори
источник

1

Вы можете использовать JavaScript, чтобы получить вычисленный стиль (фактически используемый стиль) элемента. Удалите из него 80 пикселей и сравните его с 500, чтобы увидеть, что больше. Что-то вроде var val = parseInt (window.getComputedStyle (el, null) .getPropertyValue ("width")) - 80) для получения ширины - 80 и el.style.maxWidth для установки максимальной ширины.

— Дэвид Стори

10

Спасибо. Однако я бы предпочел решение на чистом CSS.

— Арно

41

Каждый раз, когда есть вопрос CSS, а ответ начинается с «Вы можете использовать JavaScript», это неверно. Есть много веских причин для того, чтобы сохранить весь код представления в CSS. Все- не большинство.

— b264

8

Похоже, что min () и max () вернулись в модуль значений и единиц CSS, уровень 4 (проект редактора, 1 сентября 2017 г.) Ссылка: 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она больше.

— Теофил

2

Но это то же самое, что и использование, min()поэтому может быть полезно другим.

— Seika85

17

Мне кажется, что использование min-width вместо max-width в приведенном выше примере может быть эквивалентом требуемого поведения.

— Герт Сёндерби,

1

Ответ помог мне добавить запас к гибкому контейнеру, когда ширина страницы стала небольшой. codepen.io/OBS/pen/wGrRJV

— ofer.sheffer 05

Я опубликовал решение, демонстрирующее, что комментарий @ GertSønderby действительно является правильным решением.

— SherylHohman 09

13

Хотя ответ @david-mangold выше был "близок", он был неверным.
(Вы можете использовать его решение, если хотите минимальную ширину, а не максимальную ).

Это решение демонстрирует, что комментарий @ gert-sønderby к этому ответу действительно работает:
ответ должен был использоваться min-width, а не max-width.

Вот что он должен был сказать:

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

Да, используйте min-width плюс width для имитации функции 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 ответ выше может быть проще для рассуждений и может быть более подходящим во многих случаях использования.

Также обратите внимание, что в конечном итоге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 г.).

— SherylHohman
источник

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>

Развернуть фрагмент

— Jicub
источник