Расч Макс, или Макс фон в CSS

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

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

или

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

в CSS?

4 74
css css3

4 ответа:

нет, вы не можете. max() и min() были удалены из CSS3 значения и Единицы измерения. Они могут быть повторно введены в Css4 значения и единицы однако. В настоящее время нет спецификации для них, и calc() спецификация не упоминает, что либо действительны внутри

68

"чистое" решение css на самом деле возможно теперь с помощью медиа-запросов:

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

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

обходной путь будет использовать .

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

@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>
0