CSS 配置関連:overflow属性

一覧

機能 備考
visible はみ出た部分が、はみ出たままの状態で表示される場合あり 既定値
hidden はみ出た部分が隠れる
scroll はみ出た部分が隠れてスクロールできる状態に
auto ブラウザにより表示が変わる(基本的にはスクロールできる状態に)

visible

TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST

 
 
 
 

<div id="div_visible">
 TEST
 TEST
 TEST
 TEST
 TEST
 TEST
</div>

<style type="text/css">
 #div_visible{
  width: 100px;
  height: 100px;
  overflow: bisible;
  border:1px solid #888;
 }
</style>

scroll

TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST

<div id="div_scroll">
 TEST
 TEST
 TEST
 TEST
 TEST
 TEST
</div>

<style type="text/css">
 #div_scroll{
  width: 100px;
  height: 100px;
  overflow: scroll;
  border:1px solid #888;
 }
</style>

hidden

TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST

<div id="div_hidden">
 TEST
 TEST
 TEST
 TEST
 TEST
 TEST
</div>

<style type="text/css">
 #div_scroll{
  width: 100px;
  height: 100px;
  overflow: hidden;
  border:1px solid #888;
 }
</style>

Follow me!

次の記事

CSS 背景関連