web 覚え書き

  

■CSS－－－－－－－－－－－－－－－－－－－－
html,body{
height:100%;/* フッターを画面最下部に表示させる設定 */
margin:0 auto;
text-align:center;
font-size:15px;
}

#container{
width:50%;
/* --- ▼フッターを画面最下部に表示させる設定 --- */
min-height:100%;
margin:0 auto -50px;/* 下マージン ＝ footerの高さ（footerの表示領域をcontainer内に押し上げる） */
height: auto !important;
height:100%;
/* --- ▲フッターを画面最下部に表示させる設定 --- */
background-color:#ebebeb;
}

#container #header{
width:100%;
height:30px;
background-color:#ccc;
}

#container #contents{
padding:30px 0 10px;
}

#container #footer-space{
height:50px;/* footerと同じ高さ（footerがコンテンツにかぶるのを防ぐ） */
}

#footer{
width:50%;
height:50px;
margin:0 auto;
background-color:#999;
}


■HTML－－－－－－－－－－－－－－－－－－－
<!-- Start [container] -->
<div id="container">

<div id="header">header</div>

<div id="contents">contents</div>

<div id="footer-space"><!-- --></div>
</div>
<!-- End [container] -->

<div id="footer">footer</div>



■Sticky Footer
■WD2007年9月

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
IE5.5～8beta1、Fox2~3、safari（確認）
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊  

/* hr clear ----------------*/
.hr{clear:both;}
.hr hr{display:none;}

/* clearfix ----------------*/

■HTML■
<div class="hr"><hr /></div>