Question

我需要你的帮助。

似乎我的孩子divs（textarea和text）扩展到了边界之外： enter image description here

这是理想的结果： enter image description here

这是HTML / CSS：

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">

<style type="text/css">
#one {
    width: 800px;
    border: 1px solid red;
}
#two {
    text-align: right;
}
#three {

}
#field {
    width: 100%;
}
</style>

</head>

<body>

<div id="one">

    <div id="two">text to the right</div>
    <div id="three"><textarea id="field"></textarea>

</div>

</body>

</html>

Answer 1

边框和填充会添加到宽度上。因为宽度为100％，所以将填充和边框添加到字段上。

因此，如果宽度为'1'的120px，则为边框添加2px，为填充添加几个像素。

如果从“三”中减去一些空格，就可以实现这一目标。

#three {
    width:794px;
}

example

以下内容也适用于大多数浏览器。

#field {
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box; 
}

否则，您可以从textarea中删除边框和填充。说实话，有很多方法可以做到这一点。

Answer 2

`textarea`上的边框和填充是您的问题。

两个选择

这两个选项都与textarea的CSS有关。正如您从下面的代码中可以看到的，我还为#one添加了相对定位，只是为了确保它在页面的上下文中工作，因此textarea的宽度实际上将由此容器调整大小。

设置正确的box-sizing，因此将包含边框和填充（JSFiddle）：

#one {
    width: 800px;
    border: 1px solid red;
    position: relative;
}
#two {
    text-align: right;
}
#three {

}
#field {
    width: 100%;
    box-sizing: border-box;
    /* let's also add these for cross-browser safety */
    border-width: 1px;
    padding: 2px;
}

将width设置为低于100％（JSFiddle）

#one {
    width: 800px;
    border: 1px solid red;

}
#two {
    text-align: right;
}
#three {

}
#field {
    /* (1px border + 2px padding) × 2 for left and right side */
    width: calc(100% - 6px);
}

Answer 3

它超越边界的原因是它正在采用border:2px;

Answer 4

您为width: 100% textarea设置了#field。默认情况下，textarea还具有border和padding的非零值。因此，毕竟你的textarea 800px 宽（继承自.three）+ 4px 边框+ 2px border = 806px < / strong>所有在一起（但可能略有不同，具体取决于您使用的浏览器）将#field的CSS修改为此

#field { width: 100%; margin: 0; padding: 0; border: 0; }

我还设置margin: 0只是为了确保某些浏览器不会将其设置为非零值。

Answer 5

经典的盒子模型加上宽度，边距，填充和边框。

在这种情况下，设置textarea另一种计算宽度的方法，即将框大小调整为边框（宽度适当宽度，没有边距，填充和边框）

#field { width: 100%; -webkit-box-sizing:border-box; }

（您可以添加所需的perfix，-moz，-ms，-o ...）

父div内的内容扩展超出宽度

5 个答案:

`textarea`上的边框和填充是您的问题。

两个选择

父div内的内容扩展超出宽度

5 个答案:

textarea上的边框和填充是您的问题。

两个选择

`textarea`上的边框和填充是您的问题。