overflow:hidden について

解決済

質問者：skipworth
質問日時：2007/01/30 20:55
回答数：3件

dreamweaverでサイトを作っている初心者です。

ある部分の表示がどうしてもうまくいかない（divで囲んだエリアのたての長さが,
cssの指定通りに表示されない）ので、友人に相談したところ、overflow:hiddenを加えると直るかもしれない　と言われ、つけてみると直る場合があります。

このプロパティについて調べてもそういう説明は見当たりませんが、これは裏技みたいなものなんでしょうか？
皆さんコレを使っていますか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： quads
回答日時：2007/01/31 14:34

>

http://www.fsiki.com/archive/css-doc/float.html
> http://www.geocities.jp/multi_column/float/05.html
このページを見つけるとは、初心者と名乗っている割には物分りの早い方のようですね。感心です。

> すべてにfloat:none以外をかけるとこうなってしまうのですか・・
> たぶんとても基本的なことですね　すみません・・・
ウェブページを作成し得る人のほとんどが認識していないように思います。
こういうやりとりを通じて知識を吸収していただければ大いに結構です。

閑話休題。
HTMLソースを提示する場合は、部分的な提示で十分でない場合を除いては1行目から提示してください。
文書型の宣言などが回答に関わってくる可能性があります。
style 要素内ではHTMLに於けるコメントアウトはしなくてもよいです。
http://openlab.ring.gr.jp/k16/htmllint/explain.h …
XHTMLであれば内容が無視されてもおかしくありません。

XHTMLでなくHTMLであるのであれば、
> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
この記述は誤りです。

本題…。
> 何か別の対処法があれば、教えていただけると幸いです。
あなたが見つけたページにまさに書いてあります。

#main:after {
content:"";
display:block;
clear:both;
}

これを適用すれば解決できるかもしれません。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

無事できました！
おかげさまで今日一日でfloatについてだいぶ理解を深められました。
after擬似要素についてもまったく知らなかったのでとても勉強になりました。

またお世話になるかもしれませんが、そのときはまたよろしくお願いいたします。

通報する

お礼日時：2007/01/31 17:32

No.2

回答者： quads
回答日時：2007/01/31 02:30

#main の内容が全て float:none 以外の値を取っていたりしませんよね？

どんな構成で何を指定しているのかもっと明確に示してください。

この回答への補足

あ、なんか調べたらいろいろ出てきました。

http://www.fsiki.com/archive/css-doc/float.html
http://www.geocities.jp/multi_column/float/05.html

floatってややこしい問題があるんですね。

勉強します。

補足日時：2007/01/31 11:14

通報する

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

あ、すみませんfloat:leftかけてますね。
すべてにfloat:none以外をかけるとこうなってしまうのですか・・
たぶんとても基本的なことですね　すみません・・・

掘り下げていくとこうなりました。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>
test
</title>
<style type="text/css">

</style>
</head>
<body>
<div id="main">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</body>
</html>

このとき、overflow: hidden;をmainに指定するとleft・rightを囲います。

何か別の対処法があれば、教えていただけると幸いです。

通報する

お礼日時：2007/01/31 09:42

No.1

回答者： noname#23734
回答日時：2007/01/30 21:27

裏技でもなんでもありません。

ボックスは、それのサイズよりも内容が多くてはみ出す場合はその要素が作るボックスから内容をはみ出して表示することになっています。
IEはそれをやっていないだけです。

overflow:hidden ははみ出した内容を表示しないように設定する正式にCSSで決められているプロパティと値です。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

言葉が足らず申し訳ありません。
dreamweaverの編集画面上の表示についての質問でした。

たとえば
<div id="main">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>

のような状況では、mainの中にsub1とsub2が収まる形になると思うのですが、mainのエリアを示すワクの長さがかなり短くなることがあり、まったく囲えていない形になります（編集画面上の見た目の話です）。

こういうときにoverflow:hiddenとやると表示が直ることがあるのですが。
（今やってみたら直りませんけど・・・）

mainのheightをピクセル指定すれば直ると思うのですが、それ以外の方法で対応できればと思います。

正直なところ、overflowプロパティを使うことがこれ以外になくて、まったく理解できていませんが、コレを機に勉強します。