より幅広いブラウザーとの互換性を実現するために、CSS Calc() を使用せずに動的な幅調整を実現するにはどうすればよいですか?

CSS Calc の代替

CSS calc() 関数を使用すると、要素の動的な幅調整が便利になります。最新のブラウザではサポートされていますが、IE 5.5 以前などの古いバージョンとの互換性がありません。

これを解決し、Opera と Android ブラウザにサポートを拡張するには、代わりに box-sizing: border-box の使用を検討してください。

たとえば、幅が 300px であると想定されるクラス「sideBar」の div を想定します。サイドバーの幅に基づいて「コンテンツ」 div の幅を動的に調整するには、

.content {
  width: calc(100% - 300px);
}

の使用を避け、代わりに次のスタイルを適用します。

.sideBar {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
}
.content {
  padding-left: 300px;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

固定幅を定義することによってサイドバーに box-sizing: border-box をコンテンツ div に適用すると、コンテンツの幅がサイドバーの幅に基づいて自動的に調整されるため、calc() の必要がなくなります。このアプローチにより、古いバージョンの IE、Opera、Android ブラウザなど、幅広いブラウザ間での互換性が確保されます。

以上がより幅広いブラウザーとの互換性を実現するために、CSS Calc() を使用せずに動的な幅調整を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。