Geek asks and answers

Textarea inside div

I think I'm doing something wrong here, I expect textarea to be 10 pixels smaller than the parent div on all sides, but it’s not, it’s too small:

<html>
  <div style="position: absolute; left: 10px; top: 10px; width:50%; height: 50%; border: 1px solid #000000;">
    <textarea style="position: absolute; left: 10px; top: 10px; bottom: 10px; right: 10px; border: 1px solid #FF0000; resize:none;"></textarea>
  </div>
</html>

jsfiddle: http://jsfiddle.net/2a7LR/1/

Why is this happening? and how can I make it so that it matches 10 px less on each side of the parent div?

It only displays correctly in chrome / safari, but incorrectly in every other browser (firefox, opera, IE8)

+5
source share
3 answers

http://jsfiddle.net/2a7LR/5/ CSS . width: 100%; height: 100%, 10px padding, box-sizing , .

+10
<html>
<div style="position: absolute; left: 10px; top: 10px; width:50%; height: 50%; border: 1px solid #000000;">
    <textarea style="position: relative; margin: 10px 10px 10px 10px; width:90%; height: 90%"></textarea>
</div>
</html>​

. div. , .

Cheers, Fede

EDIT: , , suppost - ​​ .

+2

http://jsfiddle.net/EzJ8G/1/ Replace the style in textarea and add the add-on: 10px;

-2
source

More articles:


All Articles