ある簡単な html を書いていて、その中で divエレメントの height を取得してもなぜかゼロになる。
でも、div の内部には button なども入っているので、画面上で見ると実際の height は 100px くらいはある。
当記事では、その謎のheightゼロ問題の原因と対策を紹介したい。
では、本題に入ろう。
heightゼロ問題が起こるhtml
謎のheightゼロ問題が起こるhtmlコードの部分を取り出すと、こんな感じ。
<div id="divID" style="clear:both;">
<div style="float:left">
<input id="button1ID" type="button" value="赤い DIV の width と height は？" />
</div>
<div style="float:right">
<input id="button2ID" type="button" value="赤い DIV の width と height は？" />
</div>
</div>
<style type="text/css">
#divID {
border: 1px solid red;
overflow: hidden;
}
</style>
<script type="text/javascript">
window.onload = function () {
jQuery('#buttonID').on('click', function () {
var wid = jQuery('#divID').width();
var hei = jQuery('#divID').height();
confirm('wid=' + wid + '\r\nhei=' + hei);
});
}
</script>
単純なコードだ。
やりたいのは、下図のように赤い長方形のdivの高さを取得したいだけなのだが。
それが何故かゼロになってしまう。（注：下図は完成版なので正しく動く）
div要素のheightが０になる問題解決
ネットを検索したら解決した。
良く利用しているスタックオーバーフローのサイトに同じ質問があった。
英文の苦手なワテだが、何となく理解できた。
divの中に入れた要素がfloat指定されていると、それはdivの高さに影響を与えないらしい。
対策としては、divの属性に
overflow: hidden;
などを追加すると高さが得られるらしい。
上図のdiv赤枠が正しく長方形で出ているのは、divにその設定をしているから。
失敗例
div に何も設定しないとこうなる。
これがワテが最初に直面した問題なのだ。
下図のように、overflowを何も設定しないと、heightがゼロになる症状が出る。
<style type="text/css">
#divID {
border: 1px solid red;
/* overflow: hidden; */
}
</style>
実際、上の例でも赤い長方形が高さゼロなので細い直線になってしまっている。
と言うことで、疑問が解消して気分爽快。
結論
div要素のheightをjQueryで取得すると何故かゼロになる問題であるが、無事に解決した。
結論としては、
div の高さがゼロになった時には中身がfloat属性を持つ要素のみが入っている。
その場合にはdivに overflow:hidden などを設定すると実際の高さが取れる。
必要に応じて overflow の他の属性を設定しても良い。scroll など。
と言う事かな。
jQuery勉強を始めて5か月目くらいなので、ちょっと自信がないが。。。
ワテの場合、こう言うトラブルに巻き込まれる事が良くあるので、WEBサイトの開発段階では、divなど要素には
border:1px dotted red;
などの枠を表示するようにしている。
良く考えてみると確かわれこマップ http://www.wareko.net/maps/ の作成時にも、こういう状況には何度も遭遇したと思うのだが、その度にネット検索で解決策を見つけて応急処理をしていた。
そういうやり方だと、記憶に残らないから直ぐに忘れるのだ。
本買ってちゃんと勉強するかな。
jQueryの歌があるのか？良く分からん。
犬が可愛いな。
何でこんなに高いんだ？分からん。
コメント