Hi there, I want an overall scrollbar on the rightmost but it will only scroll a div within the Window and everything else stays static. Is this a css thing or a java script thing? I appreciate any help I can get. Thanks.
+1
A:
does either overflow: auto or overflow: scroll help? Referencing the spec might help explain more.
Natalie Downe
2009-07-28 14:07:29
A:
Try using the css property "position:fixed" on the things you don't want to move and let everything else be normal.
Try out the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css" media="screen">
.maincontent{
width:300px;
margin:30px 100px;
}
.static1{
position:fixed;
top:10px;
left:100px;
width:300px;
height:20px;
background:red;
}
.static2{
position:fixed;
top:10px;
right: 30px;
width:100px;
height:40px;
background:green;
}
.static3{
position:fixed;
top: 300px;
left: 30px;
width:100px;
height:40px;
background:blue;
}
</style>
</head>
<body>
<div class="maincontent">
<h2>this is my main content that I want to scroll</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In commodo mi nec sapien feugiat sit amet fermentum odio pretium. Nulla et velit risus. Aenean lectus sem, semper vel interdum ut, elementum ac tortor. Suspendisse aliquam lectus quis elit adipiscing dignissim. Nullam turpis dui, tincidunt quis egestas id, auctor quis purus. Morbi ac augue eu diam tempus venenatis tempor ut orci. Curabitur nec massa eget est porttitor euismod. Nam elementum tempus mauris. Duis eleifend lorem sed odio vestibulum tincidunt. Vestibulum nisl massa, imperdiet quis egestas nec, molestie sed ipsum.</p>
<p>In quis ornare felis. Vivamus a neque mi. Sed ac mi id nunc porta commodo. Quisque ipsum tellus, elementum a aliquam ut, convallis vitae leo. Aenean pulvinar, tellus in interdum vehicula, sapien eros sodales felis, sed tincidunt justo arcu id ipsum. Integer lacus risus, scelerisque sed pharetra sed, vehicula in enim. Morbi vitae urna neque. Phasellus enim metus, cursus ac rutrum nec, porttitor non ipsum. Suspendisse tempor vestibulum sapien, non lobortis magna vestibulum at. Nulla hendrerit adipiscing massa eu faucibus. Donec est ligula, luctus eu semper pretium, facilisis a tortor. Suspendisse malesuada vulputate est in lacinia. Fusce cursus cursus ipsum sit amet porta.</p>
<p>In in ligula at urna varius tristique. Mauris vitae tellus vel est vestibulum porta. Nulla feugiat ipsum rhoncus turpis elementum sed aliquam tortor volutpat. Mauris mauris sem, consectetur sed fringilla a, feugiat eu nunc. Proin a nibh orci. Praesent gravida rutrum sodales. Quisque eget dui ac massa vestibulum vestibulum non id purus. Praesent velit purus, commodo at scelerisque vitae, pretium sit amet lacus. Praesent faucibus lacus quis turpis condimentum sit amet tincidunt augue tempor. Nunc scelerisque ultricies lorem in gravida. Curabitur est turpis, feugiat vel auctor non, convallis id elit. Morbi arcu orci, vulputate non cursus id, tincidunt ac lectus. Vivamus sed dui mauris, quis lobortis diam. Maecenas auctor arcu eu turpis rhoncus feugiat. Curabitur nisi quam, auctor non porta eu, hendrerit eu eros.</p>
<div class="static1">
static content 1
</div>
<div class="static2">
static content 2
</div>
<div class="static3">
static content 3
</div>
</body>
</html>
PetersenDidIt
2009-07-28 22:31:36