acky info

連絡先

tips

web関係、制作関係でのよしなしごとを書いています。

CSSテクニック

positionを使ったCSSテクニック

フォームに関するCSSテクニック

疑似クラスを使ったCSSテクニック

リストのCSSテクニック

tableに関するCSSテクニック

左寄せ、中央寄せ、右寄せのCSSテクニック

floatを使ったCSSテクニック

幅100%の要素の背景が横スクロールのときに消えるのを防ぐ

ads

2012/4/8 初稿

width:100%を使いブラウザの横幅いっぱいまで広がったheaderやfooterをコーディングしたときに横スクロールが出るまでブラウザの幅を縮めて右にスクロールするとスクロールの幅だけ幅100%の要素の背景が切れてしまいます。

下のサンプルではheaderは幅100%、contentsは幅300pxで中央寄せの指定をしています。

<body>
<div class="header">横幅100%のheader</div>
<div class="contents">横幅固定のcontents</div>
</body>

.header{
width:100%;
background:#999999;
}
.contents{
width:300px;
margin: auto;
background:#CCCCCC
}

このように背景が消えてしまうことを防ぐためには、幅100%を指定したclassやid、またはbodyにコンテンツ幅と同じmin-widthを指定します。

.header{
width:100%;
background:#999999;
min-width:300px;
}

上記のようにclassごと、idとに記述していくのは手間もかかりますし記述もれが発生することもあるので、bodyにmin-widthを指定する方が楽で確実です。

body{
min-width:300px;
}

また、min-widthに対応していないIE6に対応する必要がある場合は、IE独自のスクリプトであるexpressionを使います。

body{
width: expression(document.body.clientWidth < 300? "300px" : "auto");
}

Copyright (C) acky. All Rights Reserved.