HTMLドキュメントで、あるエリアを移動させる事の弊害

HTMLコンテンツの一部の表示エリアを、ある条件で表示位置の移動をすると、
構成によって移動したエリアの高さや幅が無くなってしまう為に、レイアウトが崩れる事がある。
——————————————————————————————————-
例)
<div class=”headerBox”></div>
<div class=”rightBox”>***</div>
<div class=”leftBox”>
    <div id=”leftBoxHeader”>****</div>
    <div id=”map”>*****</div>
    <table class=”listInfo”>****</table>
</div>
<div class=”footerBox”></div>

——————————————————————————————————-
があるとして、id が map のdiv をスクロールしても隠れないようにしたい。
かと行って、最初から map のdivエリアを “position:fixed” にはしない。
最初にfixedにしない理由は、
・スクロールしない最初の表示は、idがleftBoxHeaderの下にmapを表示。
・スクロールした時に、mapが隠れるタイミングでmapをブラウザ表示のtopに持ってきてfixedにする。
という条件がある為。
ここで問題が!map エリアの下に配置されている idがlistInfoの<table>がmapを表示エリアトップで
fixedにすると、このmapエリアの<div>が移動してしまう為に、<table>がその分、上にずれてしまう。
さらに、footerBoxも<table>のずれと一緒に、上にずれる(上に移動する)。
もし、HTMLの構成がもっと複雑だといろいろな表示ズレが発生してしまう。
(もちろん論理的にずれるので、ブラウザのバグではありません。正当な移動です。)

この問題解決に最初は、仕方ないから崩れたレイアウトの全てのエリアに対して、positionを移動
しようとしましたが、これが static なエリアで配置されているのを移動するわけですから、ものすごく
煩雑になります。
で、最終的にある人が、”mapと同一エリアにもうひとつエリアを被せれば”となり、ああ、なんだ!
それだ! シンプル解決。
と言う事で、上記の例だと
<div id=”map”>*****</div> —> <div id=”h_w_fix_area”><div id=”map”>*****</div></div>
とし、この h_w_fix_area に map と同じ幅と高さを指定する。
もちろん、mapを移動したときに、この h_w_fix_area は表に表示される事になるのですが、
今回のケースでは
mapが隠れたらmapを表示エリアトップに移動するので、結果としてh_w_fix_area は表示されている
けど画面には見えない事になります。

コメントを残す