Cześć. Mam problem z dość wydawało by się banalną sprawą ale meczę to już 3 dzień i nie mogę jakoś tego zrobić. Szukałem odpowiedzi na necie ale niestety mało co to dało :/ w związku z tym proszę was o pomoc.

Problem mam z szkieletem strony

[HTML] pobierz, plaintext 
	<div class="center">
		<div class="top"></div>
		<div class="middle">
			<div class="left"></div>
			<div class="right"></div>
		</div>
		<div class="footer"></div>
	</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
 
html,body
	{
	background: #f2f2f2;
	color: #555;
	font: 12px/18px arial,tahoma;
	padding:0;
	margin:0;
	height:100%;
	}
 
.center
	{
	margin:0 auto;
	min-height:100%;
	background: silver;
	width:1200px;
	}
.top
	{
	height:200px;
	background: gold;
	}
.middle
	{
	background: pink;
	height:100%;
	overflow: inherit ;
	}
.left
	{
	display: inline-block;
	width:200px;
	height: 100%;
	background: red;
	}
.right
	{
	display: inline-block;
	width:100%;
	height: 100%;
	background: green;
	}	
.footer
	{
	width:100%;
	height:100px;
	background: blue;
	}	
[HTML] pobierz, plaintext 

Chodzi o to żeby całość strony jak będzie mało treści była na 100% strony i tu zaczynają się schody ponieważ nie mogę ustawić wysokości diva(middle) przy ustawieniu 100% div jest wysoki jak całe okno przeglądarki , następna sprawa do 2 divy left i right powinny mieć one wysokość zawsze 100% diva(middle) oraz div(right) powinien być szeroki na resztę szerokości div'a(middle)

Pomocy!

Nie jestem epwny czy to tylko ja nie mam takiej wyobraźni abstrakcyjnej, ale nie widzę z opisu do dokładnie chcesz uzyskać
Odpowiem jedynie że śmiało możesz przypisać dla "left" i "right" "height:100%" bo będzie się to odwoływać do elementu w którym są zagnieżdżone w tym przypadku "middle". Może masz jakąś graficzna reprezentację tego?

Chciałbym uzyskać coś takiego


założenie jest takie że jak jest mało treści to jest to na całą stronę przeglądarki bez scroll'a

natomiast jak się zapełnia tekstem to się normalnie powiększa i pojawia się scroll w przeglądarce (nie w div'ie)