* 擬似フレームページ [#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]]
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS