オーバーフローせずにマージンを備えた 100% 幅の拡張可能な Div を作成するにはどうすればよいですか?

拡張可能な Div (幅 100%) をマージン付きで表示する方法

このシナリオでは、幅 100% の div 要素があるため、マージンを維持しながら拡張可能。マージンを使用した単純なアプローチでは、オーバーフローの問題が発生するようです。これを修正するにはどうすればよいでしょうか?

解決策は、CSS 関数 calc() を利用することです。 100% から必要なマージン値を減算することで、画面サイズに基づいて div の幅を動的に調整できます。これにより、オーバーフローやオーバーフローの問題が発生することなく、親コンテナの幅全体が利用されるようになります。

calc() 関数を組み込んだ更新された CSS コード スニペットを次に示します。

#page {
  background: red;
  float: left;
  width: 100%;
  height: 300px;
}

#margin {
  background: green;
  float: left;
  width: calc(100% - 10px);
  height: 300px;
  margin: 10px;
}

または、次のようになります。マージンの代わりにパディングを使用し、box-sizing: border-box プロパティを適用することも検討できます。このアプローチは同様の機能を提供し、主要なブラウザでサポートされています。

#page {
  background: red;
  width: 100%;
  height: 300px;
  padding: 10px;
}

#margin {
  box-sizing: border-box;
  background: green;
  width: 100%;
  height: 300px;
}

これらの手法を実装すると、さまざまな画面解像度にわたって一貫したマージンを維持しながら、拡張可能な div を幅 100% で効果的に表示できます。

以上がオーバーフローせずにマージンを備えた 100% 幅の拡張可能な Div を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。