Is anyone have solution for textarea height problem in Chrome?
In simple case like this:
<div> <textarea> </textarea> </div> Google Chrome add two pixels, so div.height = textarea.height + 2px. And yes, I try Eric's "reset.ccs" — didn't work.
P.S. of course in my "simple case" textarea and div have border, padding and margin 0px.
It's because textarea is a replaced inline element.
textarea { display:block; } should solve your "problem".
textarea is due to leaving space for text descenders. For example, you can also set line-height/font-size on the parent to increase/decrease it, or vertical-align on the textarea.
vertical-align top or bottom would solve it.The 2px is the standard border size. It's the same across all browsers though.
This works in Chrome, Firefox..
No borders : http://jsfiddle.net/NctDT/2/
Borders and ajusted div height : http://jsfiddle.net/NctDT/4/
In both cases the div and textarea are both perfectly aligned in height.
height on only textarea, check it in Chrome: jsfiddle.net/NctDT/5
textarea {display:block;} .) +1 for MatTheCatSorry, But adding html,body{ height:100%; } really seems to work
