This is the actual code (the overflow property is indeed used):
<style type="text/css">
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu
{
position: absolute;
top: 73;
z-index: 100;
width: 100%;
}
#menu dl
{
float: left;
width: 15%;
margin: 0;
}
#menu dt
{
cursor: pointer;
text-align: center;
font-size: 13;
background: #d0d0d0;
border: 1px solid #000;
color: #404040;
}
#menu dt a
{
color: #404040;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu dt a:hover
{
background: #fff;
font-weight: bold;
text-decoration: overline underline;
}
#menu dd
{
border: 1px solid gray;
z-index: 120;
}
#menu li
{
text-align: center;
background: #e8e8e8;
font-size: 13;
}
#menu li a
{
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover
{
background: #fff;
font-weight: bold;
text-decoration: overline underline;
}
#header
{
position:absolute;
top:0;
left:0;
width:100%;
height:100px;
overflow:auto;
}
#contents
{
position:fixed;
top:92px;
left:0;
bottom:0;
right:0;
overflow:auto;
}
* html body
{
padding:100px 0 0 0;
}
* html #contents
{
height:100%;
width:100%;
position: static;
}
</style>
<body>
<div id="header">
Header here
Menu here
</div>
<div id="contents">
Content here
</div>
</body>
Main Topics
Browse All Topics
by: D4LyPosted on 2005-12-22 at 12:32:43ID: 15537426
Assuming that the only content which you'd like to scroll is the actual page content, leaving the navigation, header, etc... in place, You could use CSS's overflow properties on the content div and specify a width and height for this div.
Since no specifics have been explained here in terms of code, you can learn more about overflow in CSS here:
http://www.w3.org/TR/REC-C