Div不会延伸以垂直填充屏幕

Question

我无法为我的生活获得绿色（内容）和紫色（导航）div来占据高度空间的剩余部分以填满屏幕。

我知道它很简单，但显然我已经离开了我的感官而无法看到它！

http://www.bestlincs.co.uk/new/

body
{
	margin: 0;
	padding: 0;
}

#main
{
	height: 100%;
	border:dashed #D82629 1px;
}

#content
{
	
	overflow: hidden;
	width: auto;
	height: 100%;
	background-color:rgba(41, 171, 0, 0.5)
}

#nav
{
	float: right;
	background-color:rgba(41, 0, 226, 0.5);
	width: 250px;
	height: 100%;
}

#footer
{
	position: absolute;
	bottom:0;
	width: 100%;
	height: 200px;
	background-color:rgba(41, 171, 226, 0.5)
}

<div id="main">
	
    <div id="nav">
        <p>navnavnavnavnavnavnavnav</p>
    </div>

    <div id="content">
        <p>contentcontent<br>gf dfg dfg dfg dfg df</p>
    </div>

    <div id="footer">
        <p>footerfooter</p>
    </div>
    
</div>