忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[68] [67] [66] [65] [64] [63] [62] [61] [60] [59] [58

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

ヘッダとフッタがある2カラムのサイトでheightを100%にする

コンテンツの量が少ないサイトでも、メインカラムをブラウザウィンドウ最大に表示する方法
(技術的に言うと、ボックスのheightを常に100%表示にする方法)
は色々と紹介されていたのですが、
私のPCではなかなかうまくいかなかったので、色々と考えました。

結果、以下のような方法にたどり着いたのでご紹介。


対応ブラウザ

  • IE5、6、7
  • Firefox
  • Opera
  • Safari
  • Netscape(9.0)
  • Google Chrome

様々なブラウザで検証してみたのですが、
IE8のベータ版だけうまくいきませんでした。(あきらめました。)

IEは互換モード・標準モード問わずきちんと表示されます。

実装例はこちら。

それでは詳しい解説は以下でどうぞ。


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>

ヘッダ+フッタ+2カラムのいたって普通のソースコードです。


2.CSS(ブロック配置)

2カラムの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;

}

4.IEハックを追加

* html body #container {
height: 100%;
}

* html body #footer {
bottom: -1px;
}

完成!


と喜んでいたら、
WebCreators10月号にこんな感じの内容が描いてあって、ちょっとショックでした。

他の方法などを知りたい方は、WebCreators10月号の「使えるCSSの技152」の記事のTips011、043、056などを参考にするとよいでしょう。


もうちょっと早く調べておけばよかった…

実装例はこちら。

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
06« 2017/07 »08
S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
ブログ内検索
忍者ブログ [PR]