[CSS] width: 100% の解釈

CSSで width: 100% を指定した場合、margin, padding, border を指定すると、 100% + 指定した幅 が全体の横幅となる。

例えば、
<style type="text/css">
.container {
   height: 200px;
   width: 200px;
   overflow: auto;
}
.content {
   width: 100%;
   height: 100%;
   background-color: #ccc;
   border: 1px solid red;
}
</style>

<div class="container">
   <div class="content"></div>
</div>

この場合、content の横幅は 100% + 1px x 2 となる。100%は200pxなので、横幅は202pxとなり、スクロールバーが表示される。margin, paddingでも同様。

100%の解釈は、IE(IE7, IE8で確認)、FF3でも同じ。

IEとFF3で異なるのは、スクロールバーの幅を100%に含むかどうかが異なるみたい。例えば、上の例で、border を border-top にして、縦スクロールバーが出るようにすると、FFでは縦スクロールバーのみ表示されるが、IEでは縦と横のスクロールバーが表示される。IEではcontentの横幅が 200px + スクロールバーの幅 になるのに対し、FFではスクロールバーの幅を含めた横幅が 200px になる模様。