最大のCalcの、またはCSSでのCALCの最大

それはCSSでこの最大のCalcの、またはCSSでのCALCの最大

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

または

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

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

出典

2013-05-17 Arnaud

自分でそれらを試してみたことがありますか？ –

@ gert-sønderbyによると、これらの2つを使用してください：min-width：500px;幅：calc（100％〜80px）。 – paulie4

いいえできません。 max()とmin()はCSS3値とユニットから削除されました。しかし、彼らはre-introduced in CSS4 Values and Unitsかもしれません。現在のところ仕様はありません。calc()仕様では、いずれかがcalc()関数内で有効であることは記載されていません。

出典

2013-05-17 20:36:51

ありがとうございます。同じ結果を得るための選択肢がありますか？ – Arnaud

JavaScriptを使用して、要素の計算されたスタイル（実際に使用されているスタイル）を取得できます。 80pxを削除して500と比較し、どちらが大きいかを確認します。 width-80を取得するvar val = parseInt（window.getComputedStyle（el、null）.getPropertyValue（ "width"）） - 80）とmax-widthを設定するel.style.maxWidthのようなものです。 –

ありがとうございます。しかし、私は純粋なCSSソリューションを好むだろう。 – Arnaud

回避方法は、widthを使用することです。

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

出典

2015-10-13 11:01:29

これは良い考えですが、@ Arnaudの質問を正しく理解しているならば、彼は '500px'または' 100％-80px'の最大幅を望んでいます。 '100％〜80px'が大きくても、あなたの解は最大幅を' 500px'に制限します。 – Theophilus

しかし、これは 'min（）'を使うのと同じですので、おそらく他の人にとって役に立ちます。 – Seika85

上記の例でmax-widthの代わりにmin-widthを使用すると、ask-forの動作と同等になる可能性があります。 –

「純粋な」CSSのソリューションは、実際に今、メディアクエリを使用して可能である：

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

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

出典

2016-06-02 19:02:24 Andy

すばらしい解決策！私は実際にminの高さのためにそれを使用しました、明らかに 'max-height'のためにメディアクエリを使用するかもしれません+1 – avishic

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

出典

2018-01-25 17:41:02 Jicub

最大のCalcの、またはCSSでのCALCの最大

答えて

関連する問題