Contents inside a parent div expand beyond the width
Question
I need your help.
It seems that my child divs, (the textarea and text) expand beyond the border:
This is the desired result:
Here is the 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 answers
solution1
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.
so if the width was 120px of 'one' it adds 2px for the borders and a few pixels for the padding.
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.
solution2
1 ACCPTED 2013-10-16 12:25:04
Borders and padding on textarea are your problem.
Two choices
Both choices are related to textarea's 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.
set proper
box-sizingso borders and padding will be included ( 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 )#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); }
solution3
0 2013-10-16 12:22:01
它超出边界的原因是，它采用border:2px;
solution4
0 2013-10-16 12:24:08
You set width: 100% for the #field textarea. By default, a textarea also has non-zero values for border and 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).
Modify CSS for #field to this
#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.
solution5
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)
#field { width: 100%; -webkit-box-sizing:border-box; }
(you might add desired perfixes, -moz, -ms, -o…)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.