float とか position とかを駆使してページ上部と下部にメニューを表示するレイアウトを組んでみてる。
のだが…怪現象多発（笑）
曰く、height:100%; にすると子要素のマージンを反映した高さになる。
float のせいだとは思うんだけど、子要素のマージンが親要素のマージンを上書きしてる？
曰く、body に border を設定すると予想通りのレイアウトになる。
上部メニューはマージンで位置調整して、下部は position:absolute; top:70%; （数値は適当）にしてレイアウトしたのだが、上部メニューが top:70%; の位置に来る。
親子関係とかならまだ理解できるけど、下部メニューは上部メニューから見て叔父だぞ？
で、状況確認するために *{border:1px solid black;} ってしたら予想通りの配置に。
原因究明のために色々なところに同じように border を設定したところ、body に設定するとちゃんと表示された。
Chorome で確認してみたら body の位置が子孫要素の margin-top と同じだけ下にずれてる。
適当にテキストを配置してみたら直った。
一番子になる要素が float のものしか無いってのは良くないってことか。
スペーサー GIF なんてモノが昔あったけども、スペーサー DIV を使えって事？
そりゃそうすれば色々問題は解決するけども。
ぐぬぬぬぬ。
何かスマートな解決方法は無いものか。
