2010-07-02 44 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