Responsywny formularz

Witam, mam taki małe problem - robię formularz, który powinien być responsywny. O ile z polami typu input nie ma problemu to gorzej to wygląda z textarea. Czy jest możliwość, aby textarea skalowała się jakoś do diva w którym się znajduje ? Aktualnie przy zmniejszaniu ekranu textarea wychodzi poza div. Oczywiscie można to schować poprzez overflow:hidden, ale wtedy widac miejsca gdzie ucinane jest pole. Jakieś sugestie?

width: 100% albo coś podobnego?

Przy ustawieniu width na 100% textarea będzie wystawać poza diva. Są trzy rozwiązania tego problemu:
a) ustawić padding-right dla nadrzędnego diva na ok. 6px (w zależności od paddingu i bordera ustawionego dla textarea):

<div style="border: solid 1px #000; padding-right: 6px"><textarea style="width: 100%"></textarea></div>

b) ustawić width dla textarea na 98%, ale to nie będzie wyglądało najlepiej:

<div style="border: solid 1px #000"><textarea style="width: 98%"></textarea></div>

c) napisać funkcję w JS, która przy zmianie szerokości okna zmieni szerokość textarea, coś na kształt:

HTML:

<div style="border: solid 1px #000"><textarea></textarea></div>

JS (jQuery):

$(document).ready(function() {
	function resizeTextarea() {
		$('textarea').each(function() {
			$(this).css('width',$(this).parent().width() - 6);
		});
	}

	$(window).off().on('resize',function() {
		resizeTextarea();
	});

	resizeTextarea();
});

Odejmowane 6px (opcja c), tak jak i w przypadku prawego paddingu (opcja a) to sumaryczna wartość: padding-left + padding-right + border-left-width + border-right-width dla textarea.

@mszewcz @SzeWa (btw: podobne nicki macie)

jest jeszcze coś takiego jak box-sizing, co spowoduje, że element może mieć width: 100% i padding i nie będzie wychodził poza ramkę ;)