Non-Scroll Region Help [Archive]

View Full Version : Non-Scroll Region Help

aarnott

03-16-2007, 03:46 PM

Hi,

I've been working on getting a region of my page to have no scrolling. This means that the section of the page (in this case the header) will remain at the top of the page as I scroll through the rest of the content. My current method is to have 2 div tags, one of which is a "scrollable" area, the other is a non scrollable area. My css file is as follows:

BODY
{
font-size: 80%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
margin: 0pt;
overflow:hidden;
}

#nsr {
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-top: 5px;
overflow: hidden;
width:100%;
border-bottom: #DBA428 1pt solid;
}
#sr {
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-top: 5px;
overflow-y: scroll;
overflow-x: auto;
width:100%;
height: 100%
}

Then the HTML code is structured like this:

<html>
<head>

</head>
<SCRIPT language="JavaScript" SRC="script.js" TYPE="text/javascript"></SCRIPT>
<body onResize="setNSR();" onLoad="setNSR();">
<div id="nsr">

</div>
<div id="sr">
</div>
</body>
</html>

And finally the script it calls:

function setNSR() {
var oBody = document.body;
sr.style.height = oBody.clientHeight - nsr.clientHeight - 1;
nsr.style.height = 0;
}

What is happening right now is the body renders a scrollbar and the scroll-region renders a scrollbar that is inactive. The body allows scrolling, but the non-scroll area gets scrolled (defeating the purpose). Any ideas?

Thanks,

Andrew Arnott

jlhaslip

03-16-2007, 05:14 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS Frame</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="author" content="jlhaslip@yahoo.ca" />

<style type="text/css">
* html {
margin: 0;
padding: 0;

}

body {
background-color: #eeeefe;
height: 100%;

}
#header {
height: 5em;

}

#outer {
position:absolute;
top: 5em;
left: 0%;
width: 100%;
height: 85%;
background-color: #feeeee;
margin: 0px;
overflow: auto;

}

#mid {
background-color: #eefeee;
margin: 10px;
padding: 10px;

}

#footer {
position:absolute;
bottom: 0%;
left: 0%;
margin: 0 auto;
text-align: center;
width: 100%
height: 2em;
background-color: #eeeefe;

}

</style>

</head>
<body>
<div id="header" >
<h1>Fixed Top Header</h1>
<h2>With centre scrolling div ... </h2>
</div>
<div id="outer" >
<div id="mid" >
<p>This paragraph is used to confirm the word-wrap feature. Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
</div> 
</div> 
<div id="footer" >
~~~ footer here ~~~
</div>
</body>
</html>

Set the Header and Footer heights to suit your design. Hope this helps.

aarnott

03-16-2007, 07:35 PM

Thanks for looking into this! I tried your example and it looks great, but I'm having a couple difficulties.

How do I get it to print? I need the content in the #outer section to print. I tried this but had no luck:

@media print
{
#outer
{
overflow: visible;
display: block;
background-color: #FFFFFF;
width=100%;
height=85%;
top: 0;
margin-top: 0;
visibility: visible
}
#header
{
display: none;
visibility: hidden;
}
}

It won't print out multiple pages. I know it has something to do with @media print since I have used that before to solve things. What am I doing wrong here?

Andrew Arnott

jlhaslip

03-16-2007, 08:04 PM

http://jlhaslip.trap17.com/samples/templates/fixed_header.html

aarnott

03-20-2007, 04:43 PM

Thank you so much -- this has worked perfectly. The only other question I have is... Is there any way to get rid of the inactive main vertical scrollbar in IE7? It looks perfect in firefox, but IE7 puts a scrollbar there no matter what I do :(.

Thanks,

Andrew Arnott