Cách đối sánh chính xác textarea bên trong div - CSS

Question

Tôi có <div> với chiều rộng cố định và chiều cao (có thể bằng px /%). Tôi có một số <textarea> bên trong, có chiều rộng là 100%, như;

HTML

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

CSS

div{ 
    height: 200px; 
    width: 300px; 
    background: red; 
} 
textarea{ 
    height: 100px; 
    width: 100%; 
} 

Nhưng </textarea> được kéo dài ra khỏi container, tương tự;

Tôi muốn vùng văn bản kéo dài đến 100% với vùng chứa. Làm thế nào tôi có thể đạt được điều này?

Here là fiddle hoạt động.

Answer 1

Thêm box-sizing:border-box vào CSS của văn bản.

Answer 2

Textarea có phần đệm và đường viền gốc.

Nếu bạn đặt:

textarea{ 
    height: 100px; 
    width: 98%; 
    padding:1%; 
    border:none; 
} 

Nó sẽ được trang bị :)

Answer 3

Bạn có thể sử dụng hộp cỡ. Nhưng mỗi trình duyệt là khác nhau, vì vậy ví dụ này hoạt động cho tất cả các trình duyệt lớp A.

textarea{ 
    height: 100%; 
    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://jsfiddle.net/BwVQZ/7/