目次
CSS でコンテナの幅を超えてコンテンツを拡張する
ホームページ ウェブフロントエンド CSSチュートリアル CSS でコンテナの幅を超えてコンテンツをオーバーフローさせるにはどうすればよいですか?

CSS でコンテナの幅を超えてコンテンツをオーバーフローさせるにはどうすればよいですか?

Jan 03, 2025 pm 12:30 PM

How Can I Make Content Overflow Beyond a Container's Width in CSS?

CSS でコンテナの幅を超えてコンテンツを拡張する

レスポンシブ グリッドを使用する場合、多くの場合、特定の幅に拡張する格納 div が必要になります。ただし、特定の状況では、コンテナの幅を超えてコンテンツをオーバーフローさせたい場合があります。

次の CSS 例を考えてみましょう:

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
  padding: 0 30px;
  width: 100%;
}
ログイン後にコピー

このコンテナは最大幅 1280 ピクセルに拡張され、追加されます。左側と右側にパディングします。デフォルトでは、このコンテナ内のコンテンツは定義された幅内で折り返されます。

コンテンツがコンテナの幅を超えてオーバーフローできるようにするには、2 つのオプションがあります:

1。追加の Div を使用する

最も簡単な解決策は、最初のコンテナを閉じて、画面の幅全体に広がる新しい div を開くことです。次に、この全角 div に希望の背景色または画像を適用できます。

2.コンテナを削除します

場合によっては、コンテナを含む div がまったく必要ない場合があります。コンテナを削除して、全幅の div が利用可能なスペースを埋めるだけです。この方法は、幅の外側にコンテンツを追加せずに全幅の背景を実現する必要がある場合にのみ有効です。

コード例:

<div class="container">
  <header></header>
</div>
<div class="fullwidth">
  <div class="container">
    <div class="mydiv">
      <p>Content</p>
    </div>
  </div>
</div>
<div class="container">
  <footer></footer>
</div>
ログイン後にコピー
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
.fullwidth {
  background: orange;
}
header {
  height: 50px;
  background: #663399;
}
.mydiv {
  min-height: 50px;
}
footer {
  height: 50px;
  background: #bada55;
}
ログイン後にコピー

これらのアプローチを理解することで、必要に応じてコンテナの幅を超えて溢れるコンテンツに対応できるレスポンシブ デザインを作成できます。

以上がCSS でコンテナの幅を超えてコンテンツをオーバーフローさせるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WordPressブロックと要素にボックスシャドウを追加します WordPressブロックと要素にボックスシャドウを追加します Mar 09, 2025 pm 12:53 PM

WordPressブロックと要素にボックスシャドウを追加します

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Mar 07, 2025 am 11:33 AM

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する

満足している属性を持つインラインテキストエディターを作成します 満足している属性を持つインラインテキストエディターを作成します Mar 02, 2025 am 09:03 AM

満足している属性を持つインラインテキストエディターを作成します

GraphQLキャッシングの使用 GraphQLキャッシングの使用 Mar 19, 2025 am 09:36 AM

GraphQLキャッシングの使用

スクリーンリーダーの分解:アクセス可能なフォームとベストプラクティス スクリーンリーダーの分解:アクセス可能なフォームとベストプラクティス Mar 08, 2025 am 09:45 AM

スクリーンリーダーの分解:アクセス可能なフォームとベストプラクティス

最初のカスタムSvelteトランジションを作成します 最初のカスタムSvelteトランジションを作成します Mar 15, 2025 am 11:08 AM

最初のカスタムSvelteトランジションを作成します

5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する 5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する Mar 04, 2025 am 10:22 AM

5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する

node.jsとexpressのMulterを使用してファイルアップロードします node.jsとexpressのMulterを使用してファイルアップロードします Mar 02, 2025 am 09:15 AM

node.jsとexpressのMulterを使用してファイルアップロードします

See all articles