> CSS > div要素の背景をdivの一番下まで表示したい時のやり方
div要素の背景をdivの一番下まで表示したい時のやり方

div要素の背景をdivの一番下まで表示したい時のやり方

  • 投稿日:2014/06/25
  • CSS

全体を囲むためのDIV要素「wrap」と高さの分からないDIV要素「content」があったとします。

<div class="wrap">
    <div class="content">
        内容
    </div>
</div>

上記のような状態の場合、「wrap」から「content」がはみ出てしまいます。
下図でいうと左部分です。

20140625_overflowhidden.jpg

右側のようにするには、「wrap」に[overflow: hidden]を使います。

.wrap{
    background-color: #ccc;
    overflow: hidden;
}

 overflowとは

overflowとは、領域内に収まりきらない内容をどのように処理するか指定するためのプロパティです。

プロパティ名 説明
overflow visible 領域をはみ出して表示する(初期値)
hidden はみ出た部分は表示しない
scroll スクロールで表示する
auto 自動(ブラウザに依存します。一般的には scroll と同様になります。)

この記事が気に入ったらシェアしてください

関連記事

コピペで使えるCSSだけでつくる矢印・三角形

コピペで使えるCSSだけでつくる矢印・三角形

CSSだけで 電話番号のリンクを PC・タブレット時には無効化し スマートフォン時にのみ発信させる方法

CSSだけで 電話番号のリンクを PC・タブレット時には無効化し スマートフォン時にのみ発信させる方法

同じSVGを画面内で複数回使用してCSSで色やサイズを変更する方法

同じSVGを画面内で複数回使用してCSSで色やサイズを変更する方法

orderでflexブロック内のアイテムの並び順を任意に変更する方法

orderでflexブロック内のアイテムの並び順を任意に変更する方法

flex-directionでflexブロック内のアイテムの並び方を変更する方法

flex-directionでflexブロック内のアイテムの並び方を変更する方法

Youtubeの埋め込み用タグをレスポンシブに対応させる方法

Youtubeの埋め込み用タグをレスポンシブに対応させる方法

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)