flexible height div limited to height of browser window + fixed height head div

I'm trying to replace a frameset with div layout.
The layout would have a fixed height 100% width head div; a fixed width nav div (float:left;).
The remainder is a content div which should scroll such that the nav div doesn't scroll off the page when the content div is bigger than the window.  

If I can figure all that out - then maybe add a fixed height footer div.

If I limit the content div to a fixed number of pixels all works well.  But if I try to set the content div to flex with browser window size I can't seem to achieve satisfactory results.

http://frameless.lonebuffalo.com/frameless.htm

Using a percentage for content height I can approximate the effect I want but it's pretty shabby looking if your window height isn't just so to make the percentages balance with the fixed height head.

Is this possible?  If not, anyone have a recommended standard assumed pixel height of the total window?
<style type="text/css">
html,body{
	margin: 0;
	padding: 0;
	color: #000;
	height:100%;
	background-color: #ddd;}
 
#container{
	height:100%;
	background-color: #FFF;}
 
#banner{
	background-color: #999;
	height:100px;
	border-bottom: 1px solid #333;}
 
#nav{
	padding:1% 1%;
	float: left;
	width: 210px;
	overflow:hidden;}
 
#content{
	padding-bottom:100px;
	height:70%;
	overflow:scroll;}
 
#footer{
	clear: both;
	background-color: #666;
	text-align: right;
	border-top: 1px solid #333;}
</style>

Open in new window

BrianHarcourtAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

rdivilbissCommented:
Start by fixing these HTML errors, or you'll put various browsers into quirks mode and they probably won't render your CSS correctly.

Also, make sure you are doing your testing in Opera or Firefox, then correct for IE after.

While this is a typical frameset style page, I'm not sure you're getting the best out of CSS by replicating an HTML 3.2 page, but I'll see if I can fix some of the problems you are having.

Result: 17 errors / 0 warnings

line 4 column 71 - Error: end tag for element "HEAD" which is not open
line 5 column 5 - Error: document type does not allow element "BODY" here
line 6 column 22 - Error: document type does not allow element "STYLE" here
line 50 column 3 - Error: document type does not allow element "H2" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag
line 51 column 2 - Error: document type does not allow element "P" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag
line 59 column 2 - Error: document type does not allow element "P" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag
line 67 column 2 - Error: document type does not allow element "P" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag
line 75 column 2 - Error: document type does not allow element "P" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag
line 83 column 2 - Error: document type does not allow element "P" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag
line 91 column 17 - Error: document type does not allow element "A" here
line 92 column 3 - Error: document type does not allow element "H2" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag
line 93 column 2 - Error: document type does not allow element "P" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag
line 101 column 2 - Error: document type does not allow element "P" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag
line 105 column 22 - Error: document type does not allow element "A" here
line 108 column 18 - Error: end tag for "A" omitted, but its declaration does not permit this
line 105 column 8 - Info: start tag was here
line 109 column 5 - Error: end tag for "A" omitted, but its declaration does not permit this
line 91 - Info: start tag was here
line 109 column 5 - Error: end tag for "A" omitted, but its declaration does not permit this
line 49 column 18 - Info: start tag was here
0
rdivilbissCommented:
If you can live without the fixed header, Simon Jersey has a good example...http://jessey.net/simon/articles/007.html

Stu Nichols has a nice tutorial (http://www.cssplay.co.uk/menu/framed.html) with the fixed top banner, fixed left nav and scrolling body in this example:  http://www.cssplay.co.uk/layouts/frame.html
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BrianHarcourtAuthor Commented:
The Stu Nichols closely approximates the solution I wanted closely.  But I'm not certain that I'll use it.  It does seem that this is a common design target and that at the moment I'm leaning toward fixing the height of the body to more closely approximate my current frameset functionality.
0
rdivilbissCommented:
I'm sorry I don't have the time right now to create a working example of what you are trying to achieve, which is why I pointed you towards some of the better resources targeted towards frameset style CSS implementations.

I'll generally start with an example such as the Stu Nichols, which he offers free for you to use, then carefully tweak that design until I get exactly what I want.

Rod
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.