darasion
V2EX  ›  问与答

请教CSS问题。textarea设置了padding 后百分比宽度溢出的问题。

By darasion at 2010 年 10 月 20 日 · 11095 次点击
<style>
div{
width:90%;
background:#f00;
}

textarea{
width:100%;
padding:20px;
}
</style>

<div><textarea></textarea></div>

代码如上。

textarea 的宽度大约会溢出外边 div 的 20px*2 = 40px。

这个如何解决呢?
11 条回复  •  1970-01-01 08:00:00 +08:00
no2x
   1
no2x  
   2010 年 10 月 20 日
直接解决的办法不会。

小聪明的办法一个:Div 的 Css 里加上一个 padding:0 40px 0 0;
darcy
   2
darcy  
   2010 年 10 月 20 日
<style type="text/css">
textarea
{
width:100%;
}
.textwrapper
{
border:1px solid #999999;
margin:5px 0;
padding:30px;
}
.container{
width:90%;
}
</style>
<div class="container">
<div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>
darcy
   3
darcy  
   2010 年 10 月 20 日
使用这个更标准

http://gist.github.com/634572
chone
   4
chone  
   2010 年 10 月 20 日
lz的意思是需要让textarea和容器边界有20px的间隙,
还是需要让容器的宽度只有90%?
POPOEVER
   5
POPOEVER  
   2010 年 10 月 20 日 via iPad
padding 是不计入盒模型宽度的
POPOEVER
   6
POPOEVER  
   2010 年 10 月 20 日 via iPad
估摸着你要的效果应该用 div {width:100%} textarea {margin:0 20px} 来解决
AJ
   7
AJ  
   2010 年 10 月 20 日
不要用width:100%,任何容器加上此再加padding都会溢出
AJ
   8
AJ  
   2010 年 10 月 20 日
What Does “width: 100%” Do in CSS?
http://www.impressivewebs.com/width-100-percent-css/
qifei
   9
qifei  
   2010 年 10 月 20 日
行李员真是诲人不倦啊
darasion
   10
darasion  
OP
   2010 年 10 月 20 日
我最终决定,放弃padding了。
POPOEVER
   11
POPOEVER  
   2010 年 10 月 20 日
用 remainder 确实可以

http://gist.github.com/635852
© 2026 V2EX · 29ms · 3.9.8.5