Прошу помогите по CSS

Я уже двое суток бьюсь не понимаю как сделать нафиг!

Есть сайт, где не будет общего скролла, а будет скролл только у контента!

Есть шапка сайта 250px.

Есть контент сайта, который надо растягивать на всю высоту сайта! НО надо вычесть у него эти 250px.

Мутем -magrin-buttom: -250px; Ничего не вычитается!!! И контент висит вниз!

Если тупо скрыть контент, то низ текста (где надо скролить на показывается)

Как быть???????

Вот тестовый где делаю верстку: http://test.stelom.ru/

КОД HTML:

<div id="header"></div>

<div id="main"><div class="content">{content}</div></div>

КОД CSS:

@charset "windows-1251";

/*Основной стиль всего сайта*/

html {

	margin: 0px;

	padding: 0px;

	width: 100%;

	height: 100%;

}

body {

	background: #000;

	color: #111;

	font-family: Verdana, Arial, Tahoma, Helvetica, sans-serif;

	word-wrap: break-word;

	font-size: 12px; /* размер текста */

	margin: 0px;

	padding: 0px;

	width: 100%; /* ширина */

	height: 100%;

	line-height: 140%; /* междустрочный интервал */

}

header, nav, section, article, aside, menu, footer { display: block; }

/*КОНЕЦ:Основной стиль всего сайта*/



/*Шапка сайта*/

#header {

	margin: 0 auto; /* центрирование */

	width: 980px; /* ширина */

	height: 250px;

	background-image: url("../images/fon1.png");

}



/*Основной блок*/

#main {

    height: 100%;

	background-color: #0FC;

	width: 980px; /* ширина */

	margin: 0 auto; /* центрирование */

}

/*Основной контент*/

.content {

	height: inherit;

	overflow: scroll;

	opacity: 0.5;

	background-color: #FFF;

}