父div内的内容超出了宽度
[英]Contents inside a parent div expand beyond the width
问题描述
I need your help. 
我需要你的帮助。
It seems that my child divs, (the textarea and text) expand beyond the border: 看来我的孩子的div（文本区域和文本）超出了边界：
This is the desired result: 这是期望的结果：
Here is the HTML/CSS: 这是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>
5 个解决方案
解决方案1
1 2013-10-16 12:23:08
Borders and padding are added onto the width. 边框和填充添加到宽度上。 since your width is 100% it adds the padding and border onto the field. 由于您的宽度为100％，因此会在字段上添加填充和边框。
so if the width was 120px of 'one' it adds 2px for the borders and a few pixels for the padding. 因此，如果宽度为“ 1”的120像素，则边框将增加2像素，填充将增加几像素。
if you subtract the some space off of 'three' you can achieve this. 如果您从“三个”中减去一些空间，则可以实现此目的。
#three {
width:794px;
}
The following should work with most browsers as well. 以下内容也适用于大多数浏览器。
#field {
width: 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
Otherwise you can remove the border and padding from the textarea. 否则，您可以从文本区域中删除边框和填充。 There are quite a few ways to do this to be honest. 说实话，有很多方法可以做到这一点。
解决方案2
1 已采纳 2013-10-16 12:25:04
Borders and padding on textarea are your problem. textarea边框和填充是您的问题。
Two choices 两种选择
Both choices are related to textarea's CSS. 两种选择都与textarea的CSS有关。 And as you can see from code below I've also added relative positioning to #one , just to make sure it'll work in the context of your page, so textarea's width will actually be sized by this container. 正如您从下面的代码中看到的那样，我还为#one添加了相对位置，以确保它可以在您的页面上下文中使用，因此textarea的宽度实际上将由此容器确定大小。
set proper
box-sizingso borders and padding will be included ( JSFiddle ):设置适当的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; }set
widthto less than 100% ( JSFiddle )将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); }
解决方案3
0 2013-10-16 12:22:01
它超出边界的原因是，它采用border:2px;
解决方案4
0 2013-10-16 12:24:08
You set width: 100% for the #field textarea. 您设置width: 100% #field文本区域的width: 100%为width: 100% 。 By default, a textarea also has non-zero values for border and padding . 默认情况下，textarea的border和padding也具有非零值。 So after all your textarea is 800px wide(inherited from .three ) + 4px border + 2px border = 806px all together (but it might differ slighty, depending on browser you use). 因此，毕竟您的textarea宽为800px （继承自.three ）+ 4px边框+ 2px边框= 806px （但可能略有不同，具体取决于您使用的浏览器）。
Modify CSS for #field to this 将#field CSS修改为此
#field {
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
I also set margin: 0 just to be sure that some browsers won't have it set to non-zero value. 我还设置了margin: 0只是为了确保某些浏览器不会将其设置为非零值。
解决方案5
0 2013-10-16 12:28:12
the classic box model adds up width with margin, padding and border. 经典的盒子模型将宽度与边距，填充和边框相加。
In this case, set your textarea another way of calculating width, ie box-sizing to border-box (width is proper width, without margin, padding and border) 在这种情况下，将您的textarea设置为另一种计算宽度的方法，即将box-sizing设置为border-box（宽度是适当的宽度，没有边距，内边距和边框）
#field { width: 100%; -webkit-box-sizing:border-box; }
(you might add desired perfixes, -moz, -ms, -o…) （您可以添加所需的前缀，-moz，-ms，-o ...）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.