CSSでwidthを100%指定しても 横スクロールバーが表示されるとスクロール分の長さだけ幅が足りなくなる
CSSでwidthを100%指定しても 横スクロールバーが表示されるとスクロール分の長さだけ幅が足りなくなる現象について対策を紹介します。
現象の確認
以下のコードを作成します。
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style type="text/css">
<!--
.frameA {
text-align: center;
width: 100%;
background-color: #808080;
}
.frameB {
text-align: left;
margin-left:auto;
margin-right:auto;
width: 600px;
background-color: #F0F0F0;
}
.frameC {
width: 100%;
height:64px;
background-color: #7dd3ff;
}
-->
</style>
</head>
<body>
<div class="frameA">
<div class="frameB">
あいうえお<br />
かきくけこ<br />
さしすせそ<br />
ABCDEF<br />
</div>
</div>
<div class="frameC"></div>
</body>
</html>
HTMLファイルを表示します。下図の画面が表示されます。
ウィンドウの横幅を狭くします。
さらに狭くすると、横スクロールバーが表示されます。
横スクロールバーが表示された状態で、右方向にスクロールします。width:100%を指定している、水色の枠(frameC)の横幅が欠けてしまっていることが確認できます。
原因
width:100%を指定した場合、100%幅はブラウザのウィンドウの横幅であり、スクロール領域を含めた幅でないため、スクロールバーが表示されると、横幅が足りなくなることが原因です。
対策
スクロールバーが表示される幅(最小幅)の値をmin-widthに設定することで回避できます。
下記のコードに変更します。
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style type="text/css">
<!--
.frameA {
text-align: center;
width: 100%;
background-color: #808080;
}
.frameB {
text-align: left;
margin-left:auto;
margin-right:auto;
width: 600px;
background-color: #F0F0F0;
}
.frameC {
width: 100%;
min-width:600px;
height:64px;
background-color: #7dd3ff;
}
-->
</style>
</head>
<body>
<div class="frameA">
<div class="frameB">
あいうえお<br />
かきくけこ<br />
さしすせそ<br />
ABCDEF<br />
</div>
</div>
<div class="frameC"></div>
</body>
</html>
解説
.frameC {
width: 100%;
min-width:600px;
height:64px;
background-color: #7dd3ff;
}
上記の"min-width:600px;"を追加しています。このコードにより、スクロールバーが表示された場合でも、600Pixel以下の横幅にはならない動作となります。600pxの数値は、frameBクラスでのwidthで指定されている600pxと同じ値を使います。
実行結果
HTMLファイルを表示し、横幅を狭くし横スクロールバーが表示される状態にします。右にスクロールします。frameCの横幅が欠けていないことが確認できます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
