webpage does not fill browser window vertically

25 May 2006, 07:35

#1

New Zenner

Join Date:: May 2006
Posts:: 16
Plugin Contributions:: 0

webpage does not fill browser window vertically

check it out: http://www.clickpopstore.clickpoprecords.com/index.php?main_page=product_info&cPath=65&products_id=183

i can't seem to get the webpage to fill the entire browser window unless the content forces a larger size. i've tried adding height attributes just about everywhere i can think of [including the body and mainWrapper div in the CSS]. i've also tried embedding a transparent spacer.gif to take up extra space, but the height attribute cannot be set to a percentage.

the only thing i've found that works is when i set the height attribute to a defined length - this works when placed in a number of divs within the stylesheet.css. - but then the scrollbar appears, and will only fill up the page of a browser that is smaller than the defined height.

i did notice that in the body element of the tpl_main_page.php file, the ID does not have a standard name, but is a php script instead. i'm thinking that because of this i cannot define the height of the body element in the css because it has an unidentifiable name... ??

any ideas?

25 May 2006, 15:37

#2

tykies

New Zenner

Join Date:: Feb 2006
Posts:: 95
Plugin Contributions:: 0

Re: webpage does not fill browser window vertically

Is this what you're after?

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: x-small;
color: #ffffff;
background-color: #153F6E;
padding: 0px;
height: 100%;
width: 100%;
}

25 May 2006, 18:53

#3

sartzsche

New Zenner

Join Date:: May 2006
Posts:: 16
Plugin Contributions:: 0

Re: webpage does not fill browser window vertically

i would think that that body element with it's height set to 100% would be enough to fill the page. but it doesn't do what you'd expect.

the body tag inside the tpl_main_page.php file looks like this:

<body id="<?php echo $body_id . 'Body'; ?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>>

the id is a php script. i don't know enough php to know what this means, or what it does. but it seems to be effecting the attributes of the body css element.

the mystery continues...

25 May 2006, 19:12

#4

pauls

Zen Follower

Join Date:: Feb 2006
Posts:: 300
Plugin Contributions:: 0

Re: webpage does not fill browser window vertically

Tykies code works fine, the problem is that the fill at the bottom of the page is a solid colour, the rest of your page is a gradient. Therefore you need to create a gradiant image that matches your top half of page and instead of

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: x-small;
color: #ffffff;
background-color: #153F6E;
padding: 0px;
height: 100%;
width: 100%;
}

do this

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: x-small;
color: #ffffff;
background: #1D4B7F url(../images/your_new_bottom_bit.jpg) no-repeat;
padding: 0px;
height: 100%;
width: 100%;
}

Hope that works for you

EDIT: I quite like the solid blue bar at the bottom to be honest, works quite well. :)

EDIT 2 :: heheh I just realised you may be asking how to place the rest (ie the bottom) of those industrial cylinders in the bottom section of your page ?

25 May 2006, 19:28

#5

tykies

New Zenner

Join Date:: Feb 2006
Posts:: 95
Plugin Contributions:: 0

Re: webpage does not fill browser window vertically

Paul when you mentioned a gradient I was scratching my head, then I had a look in IE and Eureka!
firefox doesn't show the clickpop_towers_web.jpg at all. On to new problems! :wacko:

What if...

You combine the two background images: the gradient and the tower, make it 1280 pixels wide total and stick it in the body tag with bottom left no-repeat properties. Then the other divs can have the blue color #153F6F as their background color. :lookaroun

25 May 2006, 19:35

#6

pauls

Zen Follower

Join Date:: Feb 2006
Posts:: 300
Plugin Contributions:: 0

Re: webpage does not fill browser window vertically

mm interestingly the problem only happens on that page or the shopping cart pages (if you add an item for example) ... if you look at other pages the bg appears as it should. Perhaps it is a php problem afterall?

25 May 2006, 21:01

#7

sartzsche

New Zenner

Join Date:: May 2006
Posts:: 16
Plugin Contributions:: 0

Re: webpage does not fill browser window vertically

yes, now you see the dilemma. ;o)

i have two divisions involved in creating the background.

div#b1 {
    background: #153F6E url(http://www.clickpopstore.clickpoprecords.com/includes/templates/bryancustom/images/clickpop_towers_bg.jpg) fixed bottom repeat-x;
    height: 100%;
    width: 100%;
   margin: 0px;
   padding: 0px;
}
div#b2 {
    overflow: auto;
    background: url(http://www.clickpopstore.clickpoprecords.com/includes/templates/bryancustom/images/clickpop_towers_web.jpg) fixed left bottom no-repeat;
    height: 100%;
    width: 100%;  
   margin: 0px;
   padding: 0px;
}

#b1 contains a solid color [#153F6E] which serves as the upper part of the page, AND a gradient that is 10x350 which matches the gradient of the image in #b2 [the towers].

#b2 is that image of the white towers in the bottom left.

these two divisions must remain separate in order to be dynamic and change with the size of the window.

i have this same setup at: www.clickpoprecords.com and it works just fine - even when the content of the page is not enough to force the body to 100% of the window size. in that instance, the height attribute within the body element works effectively.

i worked on this problem for about six hours and tried numerous combinations to get it to fill the window, but the only thing that seems to work is if i define the height attribute to a specific 'length' [not a percentage]. but then when the content exceeds the specified dimensions, i end up with an additional scrollbar - yuck. and the downside to that is that if somebody views my store with a screen larger than the dimensions i've specified for height - then they get the ugly white.

25 May 2006, 21:16

#8

sartzsche

New Zenner

Join Date:: May 2006
Posts:: 16
Plugin Contributions:: 0

Re: webpage does not fill browser window vertically

just needed to add two things:

this in the CSS:

html {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

AND define a height attribute here:

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	height: 100%;
	}

thanks for your help!

25 May 2006, 22:29

#9

tykies

New Zenner