2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

overflow

Last updated at Posted at 2018-11-28

#overflowについて

##overflowの概念
決められた箱(width&height)のから溢れ出た中身(テキスト)についてどうしてあげるかを指示するコードである
種類は以下の通り

|コード|意味|
|:-----------|------------:|:------------:|
|auto |スクロールバーを内容量に応じて自動生成してくれるが、PCの機種に依存する|
|visible   |溢れ出た部分をそのまま表示してくれる|
|scroll  |溢れ出た部分を非表示にしてくれるとともにスクロールバーが常に表示される※プリンターは溢れた部分を表示して印刷する可能性がある|
|overlay    |autoと同じ動きをしてくれるが表示されるブラウザがサファリとチャロメとopera|
|hidden    |通称禁術 一応性質としては自分が囲っている要素を認識してそれ以外は切り落とす。高さを算出して出してくれる|

コードを記載するときに気をつけたいのが
横幅&高さは確保したのか
どういうスクロールにしたいのか
クラスをどこにつけるのか
きちんとスクロールしたい範囲を指定できているか
そこにかけているか
hiddenを使用する場合は親要素にコードを記載したのか

##overflow: hidden;の使い方禁術ver
・ 困ったらこれを使おう
:exclamation:何故か解決してくれる訳がわからない子:exclamation:
・どのように表示したいかによってどこに入れるかが変わる
・親に指定した場合は子供は親の高さ指定の中でしか表示されない
・子供に指定した場合は親の高さに影響されないで表示
・親に高さ指定していない状況で子供にfloatがされているときに親にoverflow:hidden;を指定すると子の高さ幅の分だけ拡張される
・子に高さ幅が指定されている状況で中身がはみ出しているときに親にoverflow:hidden;を指定すると親の高さと幅は子の高さと幅と同じになる

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?