web 覚え書き

  

width、heightを指定していない要素に、background「repeat」以外を指定すると
（複数ページにまたがると）背景が印刷されない（IE6）

■参考
AIRE-PROJECT BLOGさん　「IE6で背景を印刷する」
http://blog.aire-project.com/entries/56.php  

■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>
  

.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix{zoom:1;} /* IE5.5～7 */

/* MacIE5のみ適用 ここから \*//*/
.clearfix{display:inline-block;}
/* MacIE5のみ適用 ここまで */



※IE8ではHollyハック内の指定も反映されるためレイアウトが崩れる。

※IE6～7用に
.clearfix{display:inline-block;}
を追記するとJavaScriptコンソールでエラーが出る。（Fox3？）
  続きを読む