calc は要素の長さを指定するために使用される css3 の関数です。 calc() の最大の利点は、要素の幅が calc() を通じて計算できることです。次に、Script House の編集者が、ページがジャンプしないスクロール バーの問題の CSS3 Calc 実装を共有します。必要な友達はそれを参照してください
calc() とは何ですか?
() 文字通り、関数関数として理解できます。実際、calc は英語の Calculate の略語で、CSS3 の新しい機能であり、要素の長さを指定するために使用されます。たとえば、calc() を使用して、要素のボーダー、マージン、パディング、フォント サイズ、および幅のプロパティに動的な値を設定できます。なぜ動的値と呼ばれるのですか? 値を取得するために式を使用するからです。ただし、calc() の最大の利点は、要素の幅を calc() を通じて計算できることです。
構文
calc() = calc(四则运算)
例:
.elm { width: calc(expression); }
ここで、「expression」は長さの計算に使用される式です
説明
は、長さの値を動的に計算するために使用されます。
演算子の前後にスペースを確保する必要があることに注意してください。例: width: calc(100% - 10px);
calc() 関数を使用して任意の長さの値を計算できます。 ;
calc() 関数は、「+」、「-」、「*」、「/」演算をサポートします。
calc() 関数は、標準の数学演算の優先順位ルールを使用します。
簡単な例:
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>calc()函数_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test { width: calc(100% - 50px); background: #eee; } </style> </head> <body> <p class="test">我的宽度为100% - 50px</p> </body> </html>
ページコンテンツが動的にロードされるとき、スクロールはありません最初はバーであり、コンテンツがバーを増やした後にスクロールが表示されます。その後、固定幅の中央揃えレイアウトを使用すると、スクロール バーの幅 1 つ分だけ左にオフセットされます。解決策は、すべてのコンテンツに overflow-y:scroll を追加するか、コンテンツに応じて CSS を入力してからコンテンツを追加することです。この記事ではスクロール バーの幅を計算する calc を紹介します。スクロール バーがある場合、スクロール バーの幅はコンテンツの外側でもシミュレートされるため、オフセットされません。 ·
非常に簡単で、たった 1 行のコードで実行できます:
.wrap-outer { margin-left: calc(100vw - 100%); }
または:
.wrap-outer { padding-left: calc(100vw - 100%); }
) 次に、calc は CSS3 の計算であり、IE10 以降のブラウザーでサポートされており、基本的にサポートされています。 IE9 ブラウザー (background-position では使用できません);
最後に、100vw はブラウザーの window.innerWidth に対する相対的なブラウザーの内部幅です。スクロール バーの幅も含まれることに注意してください。 100% が利用可能な幅、つまりスクロール バーを除いた幅です。
以上がCSS3 Calcのスクロールバーがページ上でジャンプしない問題を解決の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。