4

我有一个简单的 div，其中有 2 个 textarea。我将 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

我相信这可能是 textarea 有边框或填充的问题。两者都将使用 100% 宽度计算，并导致宽度比容器宽。

您可以添加边框框以使用宽度而不是 IN ADDITION 来计算填充和边框

尝试添加：

.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

您需要重置填充和边距（我已将边距设置为 -1 以适应外部 div 边框）：

演示

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

将您的CSS更改为此。

.offer_a_help textarea {
    width: 100%;
    margin:0;
    padding:0;
}

您还可以添加填充到您的.offer_a_help class

http://jsfiddle.net/YE5MP/5/

于 2013-07-04T16:55:32.800 回答