Killersites.com Homepage

Print at Apr 24, 2014 5:44:35 AM View all posts in this thread on one page
Posted by buskerdog at Apr 5, 2006 5:22:09 PM
I want my div to be 100% the height of the container, not of the screen...
I'm so close to getting this layout the way I want:
[link no longer active]

I want the container and the background to be the height of the browser and for the scrolling div to fill the container exactly and have any overflow be handled by the scollbar.

What's happening is ALMOST right: the scrolling div is actually the height of 100% of the browser window, so it has an additional bit added at the bottom that's equal to the height of the header. How do I get it to just be the height of the container it's in and end at the bottom of the screen? I don't want the uber-scrollbar of the browser to come into play.

Here's the key CSS:

#container {
background: url(images/nav/full_bground2.gif) repeat-y;
width: 747px;
height:100%;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
text-align: left;
position: relative;
}





#pageHeader {
margin-left: auto;
margin-right: auto;
background: #fff url(images/nav/full_header.jpg) no-repeat left top;
background-color: #01356b;
border-bottom: 0px solid #acb7a6;
height: 161px;
z-index: 30;
position:relative;
}



#scrollcontent{
background-color: #FFFFFF;
background: url(images/nav/body_bground.gif);
padding:32px;
position:relative;
left: 145px;
height:100%;
width:525px;

overflow:auto;
background:transparent !important;
z-index: 1;

}




body>div {margin:0 auto;}

html {
height:100%;
}
body {

/* HIDE THE BACKGROUND COLOR WHEN WHITE IS NEEDED */
background-color: #01356b;
height:100%;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px; }
.style3 {color: #FFFFFF}
img.bottom {vertical-align:text-bottom}


EDIT: to be fair, i'm looking at it again and I'm not sure what i thought is happening is happening. But still! It's kinda close I think. What can I do to fix it? thanks!

Posted by admin at Apr 5, 2006 5:31:19 PM
Re: I want my div to be 100% the height of the container, not of the screen...
Hi,

You can use the Matching div heights script
----------------------------------------
Stefan Mischook
Check out the web design video store.

Posted by buskerdog at Apr 5, 2006 5:46:24 PM
Re: I want my div to be 100% the height of the container, not of the screen...
I threw the JS version of that in there but I'm not sure what to change in my CSS. If I set the height of the scrolling div to 100% then I get this slightly too long version. If I take that out then it just shows the whole thing without any scrolling. Hmmm...

Posted by admin at Apr 5, 2006 6:05:19 PM
Re: I want my div to be 100% the height of the container, not of the screen...
Just watch the video.

The script looks at the <div>'s that you 'tag' with the class of 'column'. It then compares both <div> heights and makes them equal.

So if you tagged the container <div> and the other <div> you want to be the same height they should match.

I'm interested to see how the script behaves when you have one of the target <div>'s sitting inside the other?

As always, test.
----------------------------------------
Stefan Mischook
Check out the web design video store.

Posted by buskerdog at Apr 5, 2006 6:53:13 PM
Re: I want my div to be 100% the height of the container, not of the screen...
I see. What would work for me would be if I could get that JS to determine the height of the browser minus the height of the header and use that for its variable. Time to poke around.