2010-07-02 41 views
25

看看我在这里得到了多少:[链接被删除了] 我如何使绿色按钮上方的textarea填充div块? 我的意思是,如何使textarea与注释块的宽度完全相同?如何让textarea填满div区块?

+1

尝试给它一个'width:100%' – 2010-07-02 10:58:42

+2

如果那会很简单。 无论如何,补充说。检查链接。 :P – Rihards 2010-07-02 11:05:00

+1

'width:100%'导致它溢出。你可以将宽度设置为488px,这是其他盒子的宽度。我没有检查,看看它为什么会溢出 - 修复这可能是一个更好的解决方案。 – Mike 2010-07-02 11:09:04

回答

42

请参考本文它实现了CSS3箱集束性 http://css-tricks.com/box-sizing/

这样做的一个快速的解决方案是设置

textarea { 
    width: 100%; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
} 

这里是工作的例子,它实现了箱上浆物业 http://css-tricks.com/examples/BoxSizing/

使用宽度像99%或略小的容器div内调整,已经不鼓励。

+0

干净整洁的解决方案,谢谢!但“支持IE8 +:盒子大小”......请注意,两年前,当IE8是最新版本时,我写了上面的答案。即使现在你仍然有很多用户运行XP + IE6,这取决于你的客户。 – Vinz 2012-05-23 15:15:32

+0

@Vinz,它的真实与你的关注。 但是,我相信“使用旧的浏览器会让你自己受苦”。如果IE不支持,那么它的IE的问题,为什么它应该是我们的问题:) - – acpmasquerade 2012-09-03 03:28:31

+0

@Vinz,我不确定你对此有何感想,但Twitter的“Bootstrap”是一个很棒的平台在现代的界面上,如果我们尝试从这些高度优化的平台导入功能将会更好。 – acpmasquerade 2012-09-03 03:30:13

4

尺寸标注文字区域以百分比不知何故始终无法正常工作,我同样的问题,多年前曾和最终使用宽度:99%....

我建议你使用一个div围绕文本区域绘制圆边框并删除textarea本身的边框。这样textarea的宽度不需要精确,你可以使用98%或99%。

+1

噢,好 - 检查链接。 它工作得很好,但我仍然想知道有人知道如何在我的情况下以百分比为单位进行尺寸标注textareas? – Rihards 2010-07-02 11:26:52