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

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

全体を囲むための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 と同様になります。)

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

Comment Form

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