web-dev-qa-db-ja.com

CSS calc（）で負の値を取得することは可能ですか？

ビューポートの中央に配置されたコンテナがあるとしましょう...

.centered{margin: 0 auto; width:960px;}

...そしてそのコンテナの中に、ビューポートの幅の100％の幅を必要とする別のコンテナがあります。マージンを...に設定できます.

.widest{margin: 0 -480px}

... 例えば。問題は、値が-480pxではなく、実際にはビューポートの幅（960px）-.centered幅/ 2 ... calc（）ですべて簡単にできて、負の値である結果が必要なだけです。 。

.widest{
  margin: 0 calc( (100vw - 960px) / 2 );
}

負の値を得るために0からロットを差し引いてみましたが、うまくいきませんでした。

私はJSを使用したくないし、Webkitでのみ問題があります-calc（）ではありません-私の問題は、実行することで提出にハッキングすると...

.widest{
  margin: 0 -100%;
}

... Chrome/Safariでページが水平方向にスクロールします。

あなたの考え？

csscalc
17
Jayx

はい、ある程度は可能です。重要な部分は、要素の幅を_100vw_に設定してから、ビューポートの幅の半分の負の値に、中心の要素の幅の半分を加えてオフセットします。 calc(-50vw + 200px)：

デモフィドル

HTMLを考えると

_<div id='center'>center
    <div id='full'>full width</div>
</div>
_

CSS

_html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    text-align:center;
    position:relative;
}
#center {
    width:400px;
    height:100%;
    background:red;
    margin:0 auto;
}
#full {
    width:100vw;
    height:100px;
    background:green;
    margin-left:calc(-50vw + 200px);
}
_
22
SW4

編集：以前のものより簡単なトリック：calc(0px - something)-ユニット付き-calc(0 - something)は機能しませんが、機能します。参照 フィドル

これらの「トリック」は機能します：

calc(1px - something - 1px);
calc(-1 * something)
calc(0px - something) /* new */

どこ 0 - somethingしませんでした（少なくともあなたの例では）。

フィドル1
フィドル2

34
FelipeAls

あなたは次の解決策を試すことができます

.some-class {
   margin-left: calc(-1px - ((100vw - 100%) / 2) + 1px);
}
1
Oleg Sewruk

別の可能な解決策があります。 -2で除算できるため、負の結果が得られます

.widest{
  margin-left: calc( (100vw - 960px) / -2 );
}
1
sneduka