* 擬似フレームページ [#s2b95f32] frame で切られたページは最近様々な理由で敬遠されてきており、 替わって、CSS でレイアウトされたページがポピュラーになってきている。 しかし、IEとFirefoxなどでCSSの解釈が異なるために、 うまくレイアウトが効かず苦労すると。 その末たどり着いたレイアウトを、以下にメモ。 これなら、Firefox でも バカIE6 でも同じように表示される。 標準モードでも後方互換モードでもどちらでもOK。 *** ヘッダ、フッタ、コンテンツ のパターン [#b3f3ffb2] #code(HTML){{ <style type="text/css"> html, body { margin: 0; padding: 0; } html body { padding-top: 77px; padding-bottom: 45px; overflow: hidden; } #contentsHeader { position: absolute; z-index: 1; left: 0px; top: 0px; background-color: #ff8888;/* わかりやすくするため */ width:100%; height: 77px; } #contentsBody { position: relative; overflow: auto; z-index: 0; width:100%; height: 100%; background-color: #88ff88;/* わかりやすくするため */ } #contentsFooter { position: absolute; z-index: 1; left: 0px; bottom: 0px; width: 100%; height: 45px; background-color: #8888ff;/* わかりやすくするため */ } </style> }} ヘッダやフッタの高さはお好みで調整可。 *** ヘッダ、フッタ、左コンテンツ、右コンテンツ のパターン [#l8e9ba3a] #code(HTML){{ <style type="text/css"> html, body { margin: 0; padding: 0; } html body { padding-top: 77px; padding-bottom: 45px; overflow: hidden; } #contentsHeader { position: absolute; z-index: 1; left: 0px; top: 0px; background-color: #ff8888;/* わかりやすくするため */ width:100%; height: 77px; } #contentsBody { position: relative; overflow: auto; z-index: 0; width:100%; height: 100%; background-color: #88ff88;/* わかりやすくするため */ } #contentsFooter { position: absolute; z-index: 1; left: 0px; bottom: 0px; width: 100%; height: 45px; background-color: #8888ff;/* わかりやすくするため */ } #contentsLeft { position: absolute; top: 0px; left: 0px; width: 120px; height: 100%; background-color: #ffcccc;/* わかりやすくするため */ } #contentsRight { position: absolute; top: 0px; left: 120px; height: 100%; background-color: #ccccff;/* わかりやすくするため */ } </style> }} *** 上記のサンプル [#y9e29149] &ref(frame_sample.zip); ----- [[MLEXP. Wiki]]