Forum Moderators: not2easy
So then I tried changing the div to a relative position. This fixes the above problem, except that when the content on the page does not extend below the available window size, the remaining space in the window gets painted over with the body bg just like when you scroll with absolute positioning.
Is there any way to have this work when the content doesn't extend beyond the available window size, and when it does?
Here is an example of both:
[pearlhorses.com...]
[pearlhorses.com...]
You will need to resize your window when you are viewing the absolute version so that your browser is smaller than the content of the page. Then try scrolling down and you will see the problem.
The design works for all screen resolutions and text sizes with the relative version as long as the content is longer than the browser window, and with the absolute version as long as the content is shorter than the browser window. Is it not possible to have it work regardless?
Do not post own urls here, please (see TOS).
How would I go about addressing this issue with javascript? Is there a way to constantly check the window size against the amount of content in the web page? Because it is a dynamic site, the amount of window space needed will be different for every page and will constantly be changing. Is it possible to monitor those details with javascript and update the CSS as necessary?
I think it's possible. I have nothing to do at the moment, and i'll try to research this issue now.
function hmax() {
var elemheight = document.getElementById("bgfooter").scrollHeight;
var winheight;
if(window.opera) {
winheight = document.body.clientHeight;
}
else if(document.all) {
winheight = document.documentElement.clientHeight;
}
else if(document.getElementById) {
winheight = window.innerHeight;
}
if(elemheight <= winheight) {
document.getElementById("bgfooter").style.height = winheight + 'px'
}
return
}
Put it in the <head> section or external js file.
Put this javascript right before </body> tag :
<script type="text/javascript">
<!--
hmax()
// -->
</script>
and you may add onresize event handler with this function to <body> tag too (but in this case the page woun't be valid :( )
css changes :
body
{
background: #000033 url(bg100000.jpg) repeat;
margin: 0;
padding : 0;
}
#bgfooter
{
width: 100%;
background: transparent url(bg-foote.jpg) bottom left repeat-x;
text-align : center;
}
#edge
{
background: transparent url(edge0000.png) top left repeat-y;
width: 722px;
margin: 0 auto;
padding: 0px;
border: 0px;
}
= all height=100% removed and "position" too. "bg-footer" is "bgfooter" now (I do not like '-' in names :)
Try this and drop me a line how it works on your side. The function could be more simple, but 'strict' mode is not good to do some things in ie :(
Thanks for your help.
May I ask you in which browsers and platforms you tested this?
