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