CSS3 Pre-Reference



overflow-y

はみ出る部分の表示方法

試す







コード

#containe {
    overflow-y: visible;
}

サンプル

その後(けむり)したから火がある。吾輩がない、腹がこんな片輪(があとで運転して勤まるものであるか自分だけがいわゆる人間中からとにかく明るくてい上(かたわ)った。

到底(あと)ってしまった。これは減る、しばらくしているがない。

これを守らなければなら家内(めしびつ)まれた御馳走は人を見出(こたつ)って一間(まった上、朝は我儘(と見えてこれをかぶせたり、今日(かない)ねばよい昼ははなはだ不人望で泣き出すので正当に住んであるまい。しかもあとって行くと。その後(たび)める事やらいくら出してやれといったまま奥へ這入(はい)ったら書生の上から食物(とうてい)いての中である。

コメントする


対応ブラウザ

Firefox
1.5~
Chrome/Safari
3.0~
Opera
9.5~
InternetExplorer
4.0~

パラメータ

visible | hidden | scroll | auto | no-display | no-content
初期値 visible
適用 非置換ブロックレベル要素、非置換インラインブロック要素
継承 しない
レベル 3
%の解釈 -
適用メディア Visual
参考文献 CSS basic box model#11. Overflow

解説

はみ出る部分の表示方法を指定します。

CSS3から、X軸、Y軸個別に指定できるようになりました。このプロパティは、Y軸方向の値を指定します。IEの独自仕様が公式採用されたかたちです。

キーワードは以下の通り:

visible
内容を切り抜きません。つまりブロックボックスの外側にもレンダリングされます。
hidden
内容を切り抜きます。ユーザは切り抜き領域外部の内容を見る事が出来ません。
scroll
内容を切り抜きます。内容が実際に切り抜かれたか否かに関わらず、スクロールバーを表示します。印刷媒体や映写媒体でこの値が指定された場合、はみ出した内容も出力します。
auto
処理方法はブラウザ依存ですが、内容が切り抜かれたか場合はスクロールバーを表示し、切り抜かれない場合はスクロールバーをを表示しないケースが一般的です。
no-display
中身がボックスに収まらない場合、ボックスごと非表示にします。表示領域も確保されません。つまり"display:none"です。
no-content
中身がボックスに収まらない場合、ボックスごと非表示にします。表示領域は確保されるため、その範囲は空きスペースになります。つまり"visibility: hidden"です。

CSS3から、キーワードが2つ増えました。

このプロパティの名称、構文は今後変わる可能性があります。詳しくは現段階のドラフトをご覧ください。

トラックバック

投稿されたコメント