webpage does not fill browser window vertically

**sartzsche** · 25 May 2006, 08:35 AM

check it out: http://www.clickpopstore.clickpoprec...roducts_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?

**Tykies** · 25 May 2006, 04:37 PM

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%;
}

**sartzsche** · 25 May 2006, 07:53 PM

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...

**Pauls** · 25 May 2006, 08:12 PM

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

Code:

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

Code:

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 ?

**Tykies** · 25 May 2006, 08:28 PM

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!

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.

**Pauls** · 25 May 2006, 08:35 PM

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?

**sartzsche** · 25 May 2006, 10:01 PM

yes, now you see the dilemma. ;o)

i have two divisions involved in creating the background.

Code:

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.

**sartzsche** · 25 May 2006, 10:16 PM

just needed to add two things:

this in the CSS:

Code:

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

AND define a height attribute here:

Code:

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

thanks for your help!

**Tykies** · 25 May 2006, 11:29 PM

excellent!

**I Brian** · 1 Jun 2006, 02:05 PM

Tried the 100% value in both sections of CSS - still no change. I can't figure out where the page width value is being defined at present.

Thread: webpage does not fill browser window vertically

Thread Tools

Search Thread

Display

webpage does not fill browser window vertically

Re: webpage does not fill browser window vertically

Re: webpage does not fill browser window vertically

Re: webpage does not fill browser window vertically

Re: webpage does not fill browser window vertically

Re: webpage does not fill browser window vertically

Re: webpage does not fill browser window vertically

Eureka!

Re: webpage does not fill browser window vertically

Re: webpage does not fill browser window vertically

Similar Threads

JQlightbox not working. Image overlays main browser window and no lightbox

Can't get tempalte to fill browser window

extend page length to fill the browser window

Removing the right sidebox -> Middle content width does not fill in space

make my pages fill window

Bookmarks

Bookmarks

Posting Permissions