23

私はこの問題を何年も抱えており、以前にも同様の質問を見たことがありますがwidth: 100%、要素に設定するときに、パディング、マージン、および境界線が幅を広げるという事実に対処したものはありません。

このフィドルを見てください。

一番上の白いテキストボックスは、幅がに設定された標準のテキストボックス100%です。ご覧のとおり、マージン、パディング、境界線の設定により、親がオーバーフローします。

緑色のテキストボックスは、を使用してdivのようなスタイルになっていますposition: absolute。これは、Webkitブラウザーでは夢のように機能しますが、他の場所では機能しません。

赤いdivはコントロールです-入力をそのように動作させたいです。

テキスト入力を最新のすべてのブラウザの赤いdivのように動作させる、つまり親のパディング内に収めるために使用できるハック/トリックはありますか？私のフィドルを編集するか、あなたの答えに添えるためにあなた自身を作成し​​てください。ありがとう！

4

3 に答える 3

39

あなたはできる：

input#classic
{
    width: 100%;
    padding: 5px;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;        
}

JSフィドルデモ。

marginオーバーフローが発生していたため、を削除し、境界線とパディングの幅を含むbox-sizing要素の幅を決定するようにを設定したことに注意してください。

于 2012-07-30T22:21:39.027 に答える
2

マージンとパディングcalcを補正するために使用するbox-sizing

input#classic
{
    padding: 5px;
    margin: 5px;
    width: -webkit-calc(100% - 10px);
    width: -moz-calc(100% - 10px);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

フィドル

于 2012-07-30T22:30:36.997 に答える
0

display:table-cellプロパティで試してください 

  display:table;
  display:table-cell;

それがあなたを助けるかもしれません

このリンクを確認してください

コンテナの残りの幅を満たすように入力要素のスタイルを設定します

于 2012-07-31T06:24:51.573 に答える