Author |
Topic |
|
snaayk
Senior Member
USA
1061 Posts |
Posted - 21 November 2003 : 15:33:29
|
I have seen and have wanted to make a div the height of the screen. Therefore taking up all the real estate available.
Using the following in CSS you can achieve a container taking up the entire height of the screen.
<div style="position:absolute;
height:expression(document.body.clientHeight - this.style.pixelTop - this.style.pixelBottom - 2);
border:1px solid BLACK">
A test
</div>
Take into consideration that this will render by determinig the entire width of the window - if you have margins you will have to subtract this number by changing the number in Red. This actually allows to ceate a frame looking style where you can scroll only the content div or left side or right side div by not affecting the overall page.
I got this by looking at the code from http://youngpup.net which is a very cool site. |
Edited by - snaayk on 21 November 2003 17:21:53 |
|
snaayk
Senior Member
USA
1061 Posts |
Posted - 21 November 2003 : 15:48:02
|
If you want the height of the parent container then you would use: height:expression(this.offsetParent.style.pixelHeight) |
|
|
DavidRhodes
Senior Member
United Kingdom
1222 Posts |
Posted - 21 November 2003 : 16:19:16
|
Interesting, i'm trying to get into this "true" way of web design HTML using DIV tags but still think it's alot easier using tables. The site above doesn't actually use that code if you look at the source! You'll like this http://www.csszengarden.com/ , every page has exacly the same source, the only thing that chjanges is an external stylesheet!
|
The UK MkIVs Forum |
|
|
snaayk
Senior Member
USA
1061 Posts |
Posted - 21 November 2003 : 17:26:07
|
quote: Originally posted by DavidRhodes
Interesting, i'm trying to get into this "true" way of web design HTML using DIV tags but still think it's alot easier using tables. The site above doesn't actually use that code if you look at the source!...
Sure it does! You can download the entire source code for the site here: http://youngpup.net/downloads/youngpup.net.zip The CSS is in the global.css file. What you will notice by looking at the script is the site is compromised of XML files that parses using XML/XLST/VBScript functions to display on the site - all available on the site of course. I like the way the site loads and the different parts of he page size themselves very fluidly - looks like Flash almost! |
|
|
snaayk
Senior Member
USA
1061 Posts |
Posted - 21 November 2003 : 17:28:32
|
quote: Originally posted by DavidRhodes
... You'll like this http://www.csszengarden.com/ , every page has exacly the same source, the only thing that chjanges is an external stylesheet!
Excellent site. It is incredible to see the power of CSS harnessed so well. I still have trouble placing things where I want (trying not to use absolute positionong). Then again, this is from designing so long with table layouts - it's time to move on |
|
|
DavidRhodes
Senior Member
United Kingdom
1222 Posts |
Posted - 21 November 2003 : 17:32:00
|
Yeah, downloaded that, didn't realise it was an external css though. From the looks of the site it loads the xml into a hidden iframe and reads the content from the iframe, neat idea, but not very browser compatible.
Regarding the code you posted above, i've never seen anything like that, it looks like css/javascript combined, must be the expression() function that can use javascript???? |
The UK MkIVs Forum |
|
|
snaayk
Senior Member
USA
1061 Posts |
Posted - 21 November 2003 : 18:00:32
|
I had never seen anything like that either. I tried it and it works. I'm wondering if that syntax (this.style.xx & dcument.body.xx) is javascript or syntax unsderstood by CSS. Since, you never declare any script tags I'm a little confused, but I know it works! |
|
|
|
Topic |
|