World of granshe.
HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
ヘッダとフッタがある２カラムのサイトでheightを100%にする
コンテンツの量が少ないサイトでも、メインカラムをブラウザウィンドウ最大に表示する方法
（技術的に言うと、ボックスのheightを常に100%表示にする方法）
は色々と紹介されていたのですが、
私のPCではなかなかうまくいかなかったので、色々と考えました。
結果、以下のような方法にたどり着いたのでご紹介。
対応ブラウザ
- IE5、6、7
- Firefox
- Opera
- Safari
- Netscape(9.0)
- Google Chrome
様々なブラウザで検証してみたのですが、
IE8のベータ版だけうまくいきませんでした。（あきらめました。）
それでは詳しい解説は以下でどうぞ。
1.コード
ヘッダ部分は略します。
<body>
<div id="container">
<div id="header">ヘッダー部分</div>
<div id="contents">
<div id="main"><p>ここがメインコンテンツ部分。</p></div>
<div id="sub"><p>こちらにサブメニューを置いたり。</p></div>
</div>
<div class="clear"></div>
<div id="footer">フッター部分</div>
</div>
</body>
ヘッダ＋フッタ＋２カラムのいたって普通のソースコードです。
２．CSS（ブロック配置）
２カラムのCSSを組みます。
body {
text-align: center; /*コンテンツをセンタリンクさせるのに使います*/
}
#container {
width: 800px;
background: url(bg.gif) repeat-y;
text-align: left; /*bodyのtext-alignを修正するために右寄せに指定します*/
}
#header {
width: 800px;
height:20px;
background: #ccc; /*わかりやすいように背景色をつけています。*/
}
#contents {
width: 800px;
margin: 0 auto;
}
#main {
width: 500px;
float: right;
background: #99CCCC;
}
#sub {
width: 280px;
float: left;
color:#fff;
background: #333;
}
#footer {
width: 800px;
height:20px;
background: #ccc;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
ヘッダとフッタをつけ、メインコンテンツはフロートを使って配置させています。
.clearfixは、floatをクリアするために使っています。#footerにclear: bothを指定しないのは理由があるので、それは後ほど。
ちなみに、サブコンテンツと同じ幅の、黒色背景画像を#containerに指定しています。
3.height 100%を指定する
html {
height: 100%;
}
body {
height: 100%;
margin:0;
text-align: center;
}
#container {
width: 800px;
margin: 0 auto;
background: url(bg.gif) repeat-y;
text-align: left;
min-height: 100%; /*最小の高さを100％（画面いっぱい）に指定します*/
position: relative;
}
#header {
width: 800px;
height:20px;
background: #ccc;
}
#contents {
width: 800px;
}
#main {
width: 500px;
float: right;
background: #99CCCC;
padding-bottom: 20px; /*#footerを配置したときに、文章が重ならないように余白をあけます。*/
}
#sub {
width: 280px;
float: left;
color:#fff;
background: #000;
}
#footer {
width: 800px;
height:20px;
background: #ccc;
position: absolute; /*#footerを絶対配置にします。*/
bottom: 0;
left: 0;
}
４．IEハックを追加
* html body #container {
height: 100%;
}
* html body #footer {
bottom: -1px;
}
完成！
と喜んでいたら、
WebCreators10月号にこんな感じの内容が描いてあって、ちょっとショックでした。
他の方法などを知りたい方は、WebCreators10月号の「使えるCSSの技152」の記事のTips011、043、056などを参考にするとよいでしょう。
もうちょっと早く調べておけばよかった…
PR
この記事にコメントする
プロフィール
最新記事
(04/02)
(03/31)
(03/22)
(03/11)
(03/07)
カテゴリー
アーカイブ
カレンダー
ブログ内検索
Advertisement
Copyright © 2008 A.Yu-ri all rights reserved.