[RESOLVED] Full Screen with Scrollable Area?

[Barton68]

Hello,

I'm trying to create a 100% width and Height layout with a menu column on the left. That works fine.
I'm having problems with the scrollable right area. The desired result is make the scrollable height and width the same of the visible window area. If not possible perhaps float the div to the RIGHT and set the height to the visible height.

Any ideas please?

Thanks,

Barton.

Test (http://www.maiocv.com/test/test.html)

body { padding: 0; margin:0;}

#container
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #4682B4;
color: #333333;
border: 1px solid #000000;
}

#leftnav
{
float: left;
width: 12em;
margin: 0;
padding: 1em 0 0 1em;
background: #4682B4;
height: 100%;
}

#content
{
margin-left: 13em;
border-left: 1px solid gray;
width: 48em;
height: 38em;
border: solid #ffffff;
border-left: 2px;
color: #ffffff;
overflow: auto;
min-height:600px;
padding-left: 10px;
}

#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }



<div id="container">
<div id="leftnav">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</div>
<div id="content">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
.........
pasted in numerous times to cause overflow
.......
</div>
</div>

[Centauri]

You need to set the height of both html and body to 100% first.

[Barton68]

Oh brilliant, thanks for your help.

Regards,

Barton.