My page ... http://webpages.charter.net/jolove/Escort_Folder/test.html
thanks to: fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css
Now I have a functional footer that adheres to the bottom of the window ..
except now what I need to do is get the footer to stick to the bottom with the height of the scrollable area above the footer shrinking or expanding accordingly as the window height changes.
In other words, the window's vertical scroll bar should never appear.
John
If correctly understand what you're trying to do it can be done using divs with percentage heights. Here is the basic idea:
<div id="header" style="height: 10%"></div>
<div id="scrollableContent" style="height: 60%; overflow: auto"></div>
<div id="footer" style="height: 30%"></div>
Using the percentage heights each div will resize according to the window size and only the scrollableContent div will have a scroll bar.
i am not sure if you wish the following just try it. on the #poemScroller change the height:28em; to height:auto;
you can use static positioning to achieve the same behavior see this example
<html>
<head>
<style>
#header{
position:fixed;
top:0;
height:50px;
z-index:5;
width:100%;
}
#content{
/* margin top should be >= header height
this also applies for footer */
margin: 50px 0;
width:100%;
}
#footer{
position:fixed;
bottom:0;
height:50px;
z-index:5;
width:100%;
}
</style>
</head>
<body>
<div id="header" > <h1>This is header</h1> </div>
<div id="content" >
<p>alot of content</p>
</div>
<div id="footer" > <h1>This is footer</h1> </div>
</body>
</html>