<div> </div> の枠を下揃えするJavaScriptを作ったが、ページ読み込みのタイミングで失敗する事がある。
ずっと以前に、大きな画像の直後にJavaScript操作をすると不具合が生じたと記憶がある。
当時とは環境が異なるので、そのような問題が残っているのかは知らない。
ともかく、その件は別にして・・・
現在このブログはヘッダーの下に3列横並びの枠があり、さらにフッターという構成である。
枠の下揃えは、3列横並び枠の下端を揃える事を言っている。
すまり、枠の縦長さを動的に変更して底辺を同じにする行為である。
ところで、僕はこれらの枠の中身を動的に変化させていない。
しかし忍者ブログ側で広告とか、無理やり入れるので変化が生じる。
そしてたいがい、広告は重くて表示に時間が掛かるなどロクな事がないのだ。
また他にも記事検索なども、処理時間が掛かって枠の縦長さの確定が遅くなるのか?
どうも静的なページのように、一度にスパッと決まらないようである。
そのような訳で、枠の縦長さを揃えるのはチョッと難しい。
これまでの経緯を書く ---------------------------------------
3列の枠の長さを調べて、一番長い枠と同じ長さを他の枠に設定する。
これは3分間で書ける簡単なコードで、このコードを適当な所で実行した。
結果、適当な所で実行しただけあって、かなり適当というか不具合が多い動作をする。
そこで、ページ読み込み完了後に実行するように、コードの実行場所を変更する。
これは画面がすべて完了した後になるので、それまでは中途半端な長さの枠が表示される。
それから最後にパッと長さが揃うので、舞台裏を見せられているようで見栄えが悪い。
まぁ、こうなる事は想定していたので、とりあえず・・・
次に、舞台裏を隠すためにページ読み込み完了まで非表示にするコードを付け加えた。
これで無様な様子を曝け出さずにすむが、待ち時間が長く感じられる。
では、この間にスプラッシュウインドウを表示して、少なくともフリーズしていないと知らせるか?
う~ん、これはまた目障りになる気がする。
常に数秒も待つのならともかく、ページの完了が早い場合にはチラチラとするだろう。
-----------------------------------------------------------------------
今のところ他に良い考えも浮かばないので、ページを非表示にする方法だけにしている。
CSSだけでなんとか出来れば良いのであるが、どうも答えが出ない。
僕にはやりたい事があって、それには見た目の下端揃えではダメなのだ。
このJavaScriptのように、キチンとサイズが決まって欲しいがCSSでは無理なのかなぁ・・・
もちろんtable系はHTMLでもCSSでも、作表ではないので使わない。
新しいバージョンのHTMLやCSSでは、レイアウト系がいろいろ出てきたようではあるが。