I'm creating this theme for wordpress http://enovastudio.org/wordpress-demo/photographer/category/blog/'>http://enovastudio.org/wordpress-demo/photographer/category/blog/ , the background is a fullscreen image that get's expanded automatically, basically i'm using the css from this plugin http://nanotux.com/blog/fullscreen/ but without the javascript (with css i'm expanding the image at 100% height and width with hidden overflow)

 

Now if you take a look at the blog category here http://enovastudio.org/wordpress-demo/photographer/category/blog/ , when there is to much content on the page, the scroll appears (as it should) , but it doesn't work as it should, a part of the content stay hidden and i can't scoll.

 

Any advice ?

 

Thanks...

You have #global-container height: 100% and the class to the same div div.page-with-content {padding-top: 150px;} which makes 100% plus 150px so something gets cut off as you have overflow: hidden for the body, so no scrollbar (except for the container div).Try these edits:-

#global-container{
position:absolute; top: 150px; /*top: 150px added to position div below header, instead of padding-top to class*/
z-index: 5;				/* Place the 
new body above the background image */
overflow:auto; 			/* restore scrollbars for 
the content */
height:80%; /*height edited from 100%*/ width:100%; 	/* Make the new body fill the screen */
background: url('images/raster.png');
}

div.page-with-content {	
/*padding-top: 150px; top position to global-container instead*/ 
}

 

That sorts out the divs being hidden at the bottom and creates a vertical scrollbar for the div but not for the body. However, mixing % height with top: 150px may cause problems in some browser resolutions.

 

FORGET THE ABOVE It's not a very satisfactory solution. I think you would do better to have the header banner position: fixed; top:0; and delete overflow: auto; so that the body has a scrollbar and scrolls behind the fixed header like this:-

body {
/*overflow:hidden;*/ 		/* needed to eliminate scrollbars 
caused by the background image */
padding:0;margin:0;		/* necesarry for the 
raster to fill the screen */
height:100%;width:100%;
background: #1f1f20 url(images/bg.png) repeat;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Trebuchet 
MS', Helvetica, Arial, sans-serif;
}

#global-container{
position:absolute;   top: 150px; 
z-index: 5;				/* Place the 
new body above the background image */
/*overflow:auto; */			/* restore 
scrollbars for the content */
/*height:80%;*/ width:100%;	/* Make the new body fill the 
screen */
background: url('images/raster.png');
}

#header {
position:  fixed; top: 0; /*was absolute;*/
z-index: 10;
}

div.page-with-content {	
/*padding-top: 150px;*/
}

.

Edited December 16, 201015 yr by Wickham