Question

我有一个简单的div，其中我有2个textarea。我将textarea的宽度设置为100%但是它稍微偏离了div。

请参阅此fiddle。

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%;
}

为什么会发生这种情况？解决这个问题的最简单方法是什么？

Answer 1

我认为这可能是textarea有边框或填充的问题。这两个都将以100％宽度计算，并使宽度比容器宽。

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

尝试添加：

.offer_a_help textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 2

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

Demo

.offer_a_help textarea {
    width: 100%;
    margin: 3px -1px;
    padding: 0;
}

Answer 3

将您的CSS更改为此。

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

您还可以在.offer_a_help class

中添加填充

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

宽度：100％使事情脱离div

3 个答案: