☰

要素の幅を100%からパディングを引いた値にするにはどうすればいいですか? 質問する

tag-icon • tag-icon html css width fluid-layout
要素の幅を100%からパディングを引いた値にするにはどうすればいいですか? 質問する

HTML入力があります。

入力には、padding: 5px 10px;親 div の幅 (流動的) の 100% にしたいというものがあります。

しかし、を使用するとwidth: 100%;入力が次のようになってしまいます100% + 20px。どうすればこれを回避できるでしょうか?

例

ベストアンサー1

box-sizing: border-boxこれを修正する簡単な方法は次のとおりです。

これすべての最新ブラウザで動作します、IE8+ に対応しています。

デモはこちらです:http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

ブラウザのプレフィックス付きバージョン (-webkit-box-sizingなど) は、最近のブラウザでは必要ありません。

おすすめ記事