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; 너비 : calc (100 %-80px);
— paulie4 jul.

답변:

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
그만한 가치를 위해 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;
  }
}
— 앤디
소스
3
훌륭한 솔루션! 저는 실제로 최소 높이로 사용했습니다. 분명히 당신은 max-height+1
— avishic
102

아니 당신은 할 수 없습니다. max()와 min()CSS3 값 및 단위에서 제외되었다. 그러나 CSS4 Values ​​and Units에 다시 도입 될 수 있습니다 . 현재 그들에 대한 calc()스펙은 없으며 스펙은 calc()함수 내에서 둘 중 하나가 유효하다는 것을 언급하지 않습니다 .

— David Storey
소스
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 값 및 단위 모듈 레벨 4 (편집자 초안, 2017 년 9 월 1 일)로 돌아온 것
— 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
위의 예에서 max-width 대신 min-width를 사용하는 것이 요청 된 동작과 동일 할 수있는 것 같습니다.
— Gert Sønderby
1
답변은 페이지 너비가 작아지면 플렉스 컨테이너에 여백을 추가하는 데 도움이되었습니다. codepen.io/OBS/pen/wGrRJV
— ofer.sheffer 2016-04-05
@ GertSønderby의 의견이 실제로 올바른 솔루션임을 보여주는 솔루션을 게시했습니다.
— SherylHohman 2019
13

하지만 @ 데이비드 - 근대의 일종의 대답은 위의 "가까운"이었다 그것은 잘못되었습니다.
( 최대 너비 대신 최소 너비 를 원하는 경우 그의 솔루션을 사용할 수 있습니다 ).

이 솔루션은 그 대답에 그 @의 거트 - 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 년 4 월부터는 사양의 일부가 아닙니다.

— 셰릴 호 만
소스
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
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.