web-dev-qa-db-ja.com

幅：100％パディング？

HTML入力があります。

入力はpadding: 5px 10px;です。親divの幅の100％にします（これは流動的です）。

しかし、width: 100%;を使用すると、入力が100% + 20pxになります。どうすればこれを回避できますか？

例

htmlcsswidthfluid-layout
360
Hailwood

box-sizing: border-box はそれを直す簡単で簡単な方法です：

これ はすべての最近のブラウザ とIE8 +で動作します。

これがデモです。 http://jsfiddle.net/thirtydot/QkmSk/301/

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

最近のブラウザでは、ブラウザの接頭辞付きのバージョン（-webkit-box-sizingなど）は必要ありません。

430
thirtydot

CSSに box-sizing があるのはこのためです。

あなたの例を編集しましたが、今ではSafari、Chrome、Firefox、およびOperaで動作します。それをチェックしてください： http://jsfiddle.net/mathias/Bupr3/ 私が追加したのはこれだけです：

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

残念ながら、IE7などの古いブラウザはこれをサポートしていません。古いIEで機能する解決策を探しているなら、他の答えをチェックしてください。

273
Mathias Bynens

パディングもパーセンテージで使用し、幅から削除します。

パディング：5％; 
幅：90％;
39
Alex

box-sizingを使わずにそれを行うことができ、width~=99%のような解をクリアしないでください。

jsFiddleのデモ ：
enter image description here

  • 入力のpaddingとborderを保持する
  • 入力に水平方向のマイナスを追加するmargin = border-width + horizontal padding
  • 前のステップのpaddingと等しい、水平方向のmarginを入力のラッパーに追加します。

HTMLマークアップ：

<div class="input_wrap">
    <input type="text" />
</div>

CSS：

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}
27
Vladimir Starkov

Css calc（）を使用してください。

超シンプルで素晴らしい。

input {
width: -moz-calc(100% - 15px);
width: -webkit-calc(100% - 15px);
width: calc(100% - 15px);
}​

ここに見られるように： 分割幅100％マイナス固定ピクセル数
webvitaly（ https://stackoverflow.com/users/713523/webvitaly ）
元のソース： http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/

もう片方のスレッドで見逃していたので、これをここにコピーしてください。

18
Daan

私が15pxのパディングを持つコンテナの中にいると仮定すると、これは私が内側の部分にいつも使うものです：

width:auto;
right:15px;
left:15px;

それはそれがどちらの側の15pxよりも小さくあるべきであるどんな幅にでも内側の部分を引き伸ばすでしょう。

乾杯

アンディ

8
Andology

あなたはいくつかのポジショニングトリックを試すことができます。あなたはposition: relativeと固定の高さでdivに入力を置くことができます、そして次に入力にposition: absolute; left: 0; right: 0;、そしてあなたが好きなパディングを持っています。

実例

5
Felix

これは codeontrack.com からの推奨事項です。

Divの幅を100％に設定する代わりに、autoに設定し、<div>がdisplay：blockに設定されていることを確認してください（<div>のデフォルト）。

4
M.YPC

入力ボックスのパディングをラッパー要素に移動します。

<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>

<div class="outer">
    <div class="inner">
       <input/>
    </div>
</div>

ここに例を見てください： http://jsfiddle.net/L7wYD/1/

4
Martin Jespersen

Width：autoの違いを理解してください。幅：100％幅：オート。 （AUTO）パディングを含む折り返しdivので与えられた正確な値に合うように幅を計算します。幅100％は幅を広げてパディングを追加します。

2
user3849374

コンテナで包むのはどうですか。コンテナには次のようなスタイルが必要です。

{
    width:100%;
    border: 10px solid transparent;
}
0
Vitali Protosovitski

これを試して：

width: 100%;
box-sizing: border-box;
0
Manolo Ramos

私は同じ問題を抱えていました。そのように修正してください。

width: 100%;
padding: 5px;
/*--------------Now remove from padding what you've added---------------*/
margin:-5px;

乾杯

0
manualva