Here is your code with your requirement
<body>
<div id="Main_div">
<header><h1>test layout</h1></header>
<div id="content">
<nav>
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
<li>link 5</li>
</ul>
</nav>
<div id="inside">
<h1>I want this box to stretch to the remaining size</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, ad, ea, cupiditate odio molestiae molestias modi qui est architecto aliquid nostrum voluptatum exercitationem quos omnis ipsa repellat voluptas voluptates alias.</div>
<div>Error, repellat voluptatibus necessitatibus ad voluptate velit labore quod modi aliquid laborum? Sed, qui, tenetur facere maxime quis molestias accusantium deleniti natus nam odit et odio voluptatem eligendi expedita porro!</div>
<div>Non, ea, explicabo quasi unde sed quo rerum consequuntur reprehenderit placeat recusandae repudiandae nulla nemo adipisci? Unde, dolor explicabo dicta sint nostrum eligendi obcaecati minus pariatur vero alias magnam eum!</div>
<div>Quo, alias, placeat, mollitia quisquam impedit ea recusandae officia illum accusantium repudiandae eos nam cum aspernatur tenetur ab explicabo error deserunt officiis voluptas dicta eum praesentium fugiat quas molestiae sed.</div>
<div>Obcaecati, laudantium cumque dolor sapiente deleniti voluptatem tenetur voluptates iusto nostrum aliquid. Pariatur, at, nemo voluptate repudiandae sapiente quibusdam cum eligendi voluptatibus soluta eos perferendis explicabo magnam asperiores iure et!</div>
<div>Saepe, ut, ad, accusamus, voluptates ex omnis neque delectus aperiam quibusdam maiores beatae nemo blanditiis culpa quaerat corrupti nostrum voluptas ipsam. Ratione, accusantium, nostrum quis corporis recusandae error quos amet!</div>
<div>Voluptate, et, perspiciatis, voluptates harum vero impedit error libero atque saepe minus distinctio sint officiis laudantium eaque quae dolore incidunt minima enim excepturi aliquid. Provident omnis inventore voluptate explicabo necessitatibus.</div>
<div>Labore, error voluptatibus modi alias aspernatur quidem maiores cumque provident saepe esse! Aperiam, nesciunt, praesentium, ut, facilis explicabo dolore cumque totam quisquam architecto magni tenetur reiciendis hic blanditiis facere tempora.</div>
<div>Molestiae, cumque, eum, corporis, expedita quam hic eos repudiandae unde architecto consequatur ducimus odit. Itaque, iste, id, ut laudantium quo reprehenderit ab labore quod laborum consequatur non est. Dolor, culpa.</div>
<div>Delectus, totam, cum doloremque ad nostrum veniam aliquam non voluptatum eligendi similique saepe laborum sed nesciunt sint voluptate at placeat officia ducimus vel aliquid unde accusamus eius! Itaque, amet, repellat.</div>
<div>Autem, alias assumenda nihil dignissimos dicta magnam voluptates neque cum eveniet non. Voluptate, quasi, tempora soluta ipsam recusandae qui ab excepturi esse possimus totam corporis quae magnam cum fugit nihil.</div>
</div>
</div> <!-- END CONTENT -->
<footer>
stuff
</footer>
</div>
</body>
and CSS for above
body {
margin: 0;
padding: 0;
position:absolute;
width: 100%;
height: 100%;
}
#Main_div{
height:100%;
width:100%;
}
header, footer {
width: 100%;
height: 20%;
background: red;
}
#content {
width:100%;
height:100%;
background: silver;
}
nav {
width: 30%;
/*override*/
height: 100%;
float: left;
background: green;
}
#inside {
margin-left:32%;
width: 65%;
height: 100%;
overflow: auto;
}
see the pic
Please verify the pic of both header and footer with content