CSSにパディングが存在するときにオーバーフローせずにTextAreaを100％幅にするにはどうすればよいですか？

StackOverflow https://stackoverflow.com/questions/271067

  •  06-07-2019
  •  | 
  •  

質問

次の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"/>
</div>

問題は、親よりもテキスト領域の幅が8ピクセル（ボーダーの場合は2ピクセル、パディングの場合は6ピクセル）になることです。ボーダーとパディングを引き続き使用する方法はありますが、textareaの合計サイズを親の幅に制限しますか？

役に立ちましたか？

解決

どうして？ハッキングを忘れて、CSSでやるだけですか？

よく使うもの：

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

ブラウザのサポートについては、こちらをご覧ください。

他のヒント

多くのCSSフォーマットの問題に対する答えは、<！> quot;別の<！> lt; div <！> gt;！<！> quot;

では、その精神で、境界線/パディングが適用されるラッパーdivを追加し、その中に100％幅のtextareaを配置しようとしましたか？ （未テスト）のようなもの：

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

達成したいことの最終出力を考えてみましょう：ボーダーとパディングの両方を備えたパディングされたテキストエリア、クリックされた特性はテキストエリアにフォーカスを渡します、およびブロック要素に典型的な自動100％幅の利点。

私の意見では、可能な限り低レベルのソリューションを使用して、ブラウザーのサポートを最大限に活用するのが最善のアプローチです。 この場合、唯一のHTMLで問題なく動作し、Javascriptの使用を回避できます（とにかく私たちはみんな大好きです）。

LABELタグは、このような動作があり、アドレスする必要がある入力要素を含めることができるため、ヘルプに含まれています。 デフォルトのスタイルはインライン要素の1つであるため、ラベルにブロック表示スタイルを与えると、パディングとボーダーを含む自動100％幅を利用できますが、内側のテキストエリアにはボーダー、パディング、100％幅はありません。

W3C固有のその他の利点に注目してください：

  • no <！> quot; for <！> quot;属性が必要です：LABELタグにターゲット入力が含まれている場合、クリックされると自動的に子入力にフォーカスします。
  • textareaの外部ラベルが既に設計されている場合、特定の入力に1つ以上のラベルが含まれている可能性があるため、競合は発生しません。

詳細については、 W3Cの詳細をご覧ください。詳細情報。

簡単な例：


<html>
<head>
<style type="text/css">
.container { width: 400px; border: 3px solid #f7c; }
.textareaContainer {
    display: block;
    border: 3px solid #38c;
    padding: 10px;
}
textarea { width: 100%; margin: 0; padding: 0; border-width: 0; }
</style>
</head>



<body>
<div class="container">
    I am the container
    <label class="textareaContainer">
        <textarea name="text">I am the padded textarea with a styled border...</textarea>
    </label>
</div>
</body>
</html>

.textareaContainer要素のパディングとボーダーは、textareaに与えたいものです。必要に応じて編集してスタイルを設定してください。 クリックしたときの動作を確認できるように、.textareaContainer要素に大きくて目に見えるパディングと境界線を付けました。

パディングの幅にあまり煩わされていない場合、このソリューションでは実際にパディングもパーセンテージで保持されます。

textarea
{
    border:1px solid #999999;
    width:98%;
    margin:5px 0;
    padding:1%;
}

完璧ではありませんが、ある程度のパディングが得られ、幅が100％になるため、すべて良好です

別のソリューションこちらに出会いました。これは非常に簡単です：padding-rightを追加しますテキストエリアのコンテナに。これにより、テキストエリアのマージン、ボーダー、およびパディングが維持され、クロムとサファリがテキストエリアの周囲に配置するフォーカスハイライトについてベックが指摘した問題を回避できます。

コンテナのパディング権は、テキスト領域の両側の有効なマージン、境界線、およびパディングと、コンテナに必要なパディングの合計である必要があります。したがって、元の質問の場合：

textarea{
    border:1px solid #999999;
    width:100%;
    margin:5px 0;
    padding:3px;
}
.textareacontainer{
    padding-right: 8px; /* 1 + 3 + 3 + 1 */
}


<div class="textareacontainer">
    <textarea></textarea>
</div>

このコードはIE8およびFirefoxで動作します

<td>
    <textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>

ボックスサイズ設定プロパティを使用できます。これは、すべての主要な標準準拠ブラウザおよびIE8 +でサポートされています。ただし、まだIE7の回避策が必要です。詳細については、こちらをご覧ください。

いいえ、CSSではできません。これが、Microsoftが最初に別の、おそらくより実用的なボックスモデルを導入した理由です。最終的に勝ったボックスモデルでは、パーセンテージと単位を混在させることは実用的ではありません。

親の割合でパディングと境界線の幅を表現しても問題ないと思います。

CSSソリューションの代わりにインラインスタイリングソリューションを探していましたが、レスポンシブテキストエリアにはこれが最適です：

<div style="width: 100%; max-width: 500px;">
  <textarea style="width: 100%;"></textarea>
</div>

次のようにパッドしてオフセットする場合：

textarea
{
    border:1px solid #999999;
    width:100%;
    padding: 7px 0 7px 7px; 
    position:relative; left:-8px; /* 1px border, too */
}

textareaの右側はコンテナの右側と完全に整列し、および textarea内のテキストはコンテナの本文テキストと完全に整列します... textareaは少し「突き出ています」。時々きれいです。

ボックスサイズ設定プロパティを使用：

-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
box-sizing:border-box;

それが役立ちます

Bootstrapを使用するユーザーにとって、textarea.form-controlはtextareaのサイジングの問題にもつながる可能性があります。 ChromeとFirefoxは、次のBootstrap CSSで異なる高さを使用しているように見えます。

textarea.form-conrtol{
    height:auto;
}

負のマージンはどうですか？

textarea {
    border:1px solid #999999;
    width:100%;
    margin:5px -4px; /* 4px = border+padding on one side */
    padding:3px;
}

calc()の問題をよく修正します。 textareaに100％の幅と一定量のパディングを与えるだけですが、textareaに与えた100％幅の左右のパディングの合計を差し引く必要があります：

textarea {
    border: 0px;
    width: calc(100% -10px);
    padding: 5px; 
}

または、テキストエリアに境界線を付けたい場合：

textarea {
    border: 1px;
    width: calc(100% -12px); /* plus the total left and right border */
    padding: 5px; 
}


* {
    box-sizing: border-box;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

input[type=text], select, textarea{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}
<div class="container">
  <div class="row">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" placeholder="Your name..">
  </div>
  <div class="row">
    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">UK</option>
      <option value="canada">USA</option>
      <option value="usa">RU</option>
    </select>
  </div>    
  <div class="row">
    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
  </div>
</div>

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top