最大の計算、またはCSSの計算の最大

122

このようなことをすることは可能ですか

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

または

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

CSSで？

css 
— アルノー
ソース
自分で試したことがありますか？
— カイルG.
5
@gert-sønderbyが言ったように、次の2つを使用してください：min-width：500px; 幅：計算（100％-80px）;
— 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
価値のあるものとして、mac Edge for 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
— 最低の
102

いいえ、あなたがすることはできません。max()そして、min()CSS3値と単位から削除されています。ただし、CSS4の値と単位で再導入される場合があります。現在、それらのcalc()仕様はありません。仕様では、calc()関数内でも有効であることは言及されていません。

— デビッドストーリー
ソース
1
JavaScriptを使用して、要素の計算されたスタイル（実際に使用されるスタイル）を取得できます。80pxを削除して500と比較し、どちらが大きいかを確認します。var val = parseInt（window.getComputedStyle（el、null）.getPropertyValue（ "width"））-80）のようなもので、幅-80を取得し、el.style.maxWidthで最大幅を設定します。
— David Storey 2013年
10
ありがとうございました。ただし、私は純粋なCSSソリューションを好みます。
— Arnaud 2013年
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);
— デビッドマンゴールド
ソース
3
これは良いアイデアですが、私は正しくアルノーの質問@理解していれば、彼はどちらかの最大幅望んでいる500pxかを100% - 80px。ソリューションでは、最大幅がより大きくて500pxも制限されます100% - 80px。
— Theophilus
2
しかし、それは使用するのと同じなmin()ので、他の人に役立つかもしれません。
— Seika85
17
ただし、上の例でmax-widthの代わりにmin-widthを使用することは、要求された動作と同等であるように思えます。
— GertSønderby2016
1
回答は、ページ幅が小さくなったときにflexコンテナーにマージンを追加するのに役立ちました。codepen.io/OBS/pen/wGrRJV
— ofer.sheffer
@GertSønderbyのコメントが実際に正しい解決策であることを示す解決策を投稿しました。
— SherylHohman
13

一方で上記@デビッド・マンゴールドの答え、それは間違っていた「クローズ」でした。
（あなたは、することができますしたい場合は、彼のソリューションを使用する最小幅の代わりに、最大幅）。

このソリューションは、その回答に対する@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の答えとはいえ、理由を説明するのが簡単で、多くのユースケースでより適切な場合があります。

また、最終的に a max()とmin()関数がCSSに導入される可能性がありますが、2019年4月の時点では仕様の一部ではありません。

— シェリル・ホーマン
ソース
1
なぜ反対票か。記載されている内容はすべて正しく、すべてのソースがリンクされ、クレジットされています。
— SherylHohman
1

@Amaud 同じ結果を得るための代替手段はありますか？

同様の結果を達成する非JavaScriptの純粋な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>
スニペットを展開

— ジクブ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.