ホームページ > ウェブフロントエンド > CSSチュートリアル > オーバーフローせずにマージンを備えた 100% 幅の拡張可能な Div を作成するにはどうすればよいですか?

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

Linda Hamilton
リリース: 2024-12-20 07:42:11
オリジナル
426 人が閲覧しました

How to Create a 100% Width Expandable Div with Margins Without Overflow?

拡張可能な 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート