☰

CSS にパディングがある場合、オーバーフローせずに TextArea の幅を 100% にするにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon html css
CSS にパディングがある場合、オーバーフローせずに TextArea の幅を 100% にするにはどうすればよいでしょうか? 質問する

次の CSS および HTML スニペットがレンダリングされます。

textarea
{
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <textarea cols="2" rows="10" id="rules"></textarea>
</div>

問題は、テキスト領域が親よりも 8 ピクセル広くなることです (境界線の 2 ピクセル + パディングの 6 ピクセル)。境界線とパディングを引き続き使用しながら、合計サイズを親textareaの幅に制限する方法はありますか?

ベストアンサー1

ハックを忘れて、CSS だけでやってみませんか?

私がよく使うもの：

.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

ブラウザのサポートを見るここ。

おすすめ記事