問題タブ [css-calc]

この質問に触発されて、私はこの興味深い現象を見つけました。

width:-200px;負の幅は違法であるため無視する必要があるため、 や のようなスタイル プロパティは効果がないと予想されwidth:calc(0% - 200px);ます。そして確かに、最初のものはそうではありません。ただし、2 番目のものは無視されません。代わりに幅 0 が使用されます。

次の例を参照してください。

width プロパティが無視された場合、div はその全幅になります (一番上のものなど)。ただし、0 に折りたたまれています (左側の黒い線を参照してください。これが境界線です)。

calc(0% - 200px)参考までに、1) それ自体はエラーではないこと、2) それらが正常に動作し、最初のスニペットが異常であることを示すために、他の div をいくつか示します。

では、通常の幅と計算された幅の動作が異なるのはなぜですか?
ブラウザが 1 つだけの場合は、バグと呼びます。しかし、彼らはすべてこれを同じように扱います！だから私が見落としている何かがあるに違いない。何？

SASS では、計算は次のようcalc(50% - 375px);になりますが、コンパイルすると、CSS 出力は次のようcalc(-325%)になります。

SASSに計算を行わないようにするにはどうすればよい(50% - 375px)ですか?

ご協力ありがとうございました！

IE11 では calc() css プロパティを理解するのに問題があるようです。

私はこのように線形勾配で calc を使用しています:

しかし、これを次のように使用すると：

問題なく動作します。

そして、もう一つわからないことがあります。IE11でそのプロパティを調べると、オフにしてから再びオンにすると機能します。

calc(50% - 1px) を使用することの要点は、角度がより滑らかに見えることです。

助言がありますか？

ブートストラップからレスポンシブな「コンテンツ」ボックスをプログラムする方法に問題があります。示されているJsFiddle-Linkのように、Bootstrap の内部をレスポンシブにしたいと考えていcontent-innerます。

私が持っているコンテンツ内箱に

• 固定幅の 1 つの div (赤)

• 2 番目のコンテナー (articleコンテナー) は、ページの残りのスペースを取る必要があるコンテナーです (したがって、高さが大きくなると、白い背景が大きくなり、上部と下部の灰色のスペースが小さくなります)。このコンテナにはoverflow-yもありますが、右側のスクロールバーが下部にもスクロールバーがあるため、overflow-xは非表示になっています。（緑）

• 3番目のものも幅が固定されています（青）

上下のスペースに注意、スペースがあるはずです。

この問題を実現/解決するための方法はあまり知りません。
ということで、実現方法をいろいろと調べてみたところ、CSS Calc() functionを見つけました。この「機能」は単なる実験的なものであるというのは本当ですか? この関数でテストしましたが、実際には成功した結果が得られなかったため、これ以上の方法はわかりません。

この問題を解決するためにテストしたときに発生した問題は、すべてのコンテンツが配置されているコンテンツ内部ボックスの白い背景が消えたことでした:/
Bootstrap クラスで修正しようとしましたclearfixが、成功しませんでした。

それで、この問題を解決する方法について何か解決策はありますか？

すべての役立つ結果と回答に感謝し、助けてくれてありがとう. :)