擬似フレームページの変更点

追加された行はこの色です。
削除された行はこの色です。
擬似フレームページへ行く。
擬似フレームページの差分を削除
 * 擬似フレームページ [#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(sample_css.html);
 - ヘッダ、フッタ、左コンテンツ、右コンテンツ → &ref(sample_css_menu.html);
 - ダウンロード用 → &ref(frame_sample.zip);
 
 
 -----
 [[MLEXP. Wiki]]
 
 #googleads(1,1)
擬似フレームページ の変更点

擬似フレームページの変更点
