4

私は2つのテキストエリアを持つ単純なdivを持っています。textarea の幅を に設定しまし100%たが、div から少しはみ出します。

このフィドルを参照してください。

HTML:

<div class="offer_a_help">
    <textarea></textarea>
    <br/>
    <textarea></textarea>
</div>

CSS:

.offer_a_help {
    width: 350px;
    height: 250px;
    position: absolute;
    top: calc(100%/2 - 350px/2);
    left: calc(100%/2 - 250px/2);
    background-color: #eee;
    border-radius: 5px;
    border: 1px solid #bbb;
}
.offer_a_help textarea {
    width: 100%;
}

なぜそれが起こっているのですか?これを修正する最も簡単な方法は何ですか?

4

3 に答える 3

9

ボーダーまたはパディングのいずれかを持つテキストエリアに問題がある可能性があると思います。どちらも 100% の幅で計算され、幅がコンテナーよりも広くなります。

border-box を追加して、パディングとボーダーを追加ではなく幅で計算することができます

追加してみてください：

.offer_a_help textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
于 2013-07-04T16:56:41.533 に答える
4

パディングとマージンをリセットする必要があります (外側の div 境界に合わせてマージンを -1 に設定しました):

デモ

.offer_a_help textarea {
    width: 100%;
    margin: 3px -1px;
    padding: 0;
}
于 2013-07-04T16:57:47.193 に答える