CSS makes 100% height ? BUT HOW ?

Creating a page with ModX os easy and cool...
but i have a ( hopefully ) small problem

I have changed the BLUEMARINEE TEMPLATE
( changed sizes and mixed it with the PLAIN TEMPLATE )

and now i want it to have 100% height like this two examples

1.: http://solardreamstudios.com/_img/learn/css/footerstick/footerstick

2.: http://www.css4you.de/wslayout1/ex0001.html


I spend like 3 hours to realize that im not gonna make it without help.
the BLUEMARINEE temp has a complicated div structure and i tried so many places for the right
css entries.

i know the syntaxes but it won’t work
it always destroys my whole layout or doesn’t change anything.


here is my page in progress (testing place )
it has a fixed size now. but that is not that think i need....
http://www.cleverontour.de/cms/modx/

sorry if im wong here but i think i have experts here...
especially if it has something to do with MODx

Doing full height templates in pure-css is challenging, and definitely a more advanced technique. You have to keep in mind that in CSS, dimensions include padding ... so you have to be extra careful... good luck!

Laughs, you chose both of my template ports!

Ahhh yes, but make one that’s a 100% height or that scrolls past the bottom whichever is longer.

First thing I suggest is getting rid of the flash banner on the right until you have it sorted. I can’t tell when its resized to 100% of the screen as the page content (the flash banner) is longer than 100% of the screen at 1024x768

I use resizing on our site to ensure it is always at at a minimum of 100% height of the screen, I then add min-height to ensure that it never resizes down to 100% of screen if it hides some other DIV. In my case I kept loosing the menu and RSS feeds.

You can find our CSS at http://www.emanz.ac.nz/assets/site/briggsy/style.css

OK

Thanx Mark for your Templates
They are great...and i think the menue
is cool there

i think i will keep the sizes of that page.
i tried the coding again (examples)
but it isn’t working.

maybe i will try it again some day.

thanx for your help guys !

what is the typical resolution ?
1024x768 or
1280x1024 or
1600x1200 ?

some people still use 800x600

So its best to keep in mind them, also now a days typically 1024x768 used widely.

Quote from: zi at Jan 07, 2006, 05:14 AM

some people still use 800x600

25% of users, according to w3schools, which is a LOT of people .

I wonder of the 25% users how many could use 1024 if they knew how to change their screen resolution?

Not being nasty here but many people just stick with how the computer was setup in the begining and never think of changing something for the life of the machine.

I agree, 100% height is a challenge in CSS onl y layouts but is is possible to get most browsers to achieve this, e.g when there is not enough content to justify the height.

If we assumed you wanted to get your wrapper to be 100%, The code could go something like this



. You could style the CSS on the individual elements also, html, then body, then #wrapper if that suits. The important part is to remember (as far as I am aware) is to ensure you apply the 100% height from the html tag down. If you apply 100% to the wapper only, it will not work in many popular browsers. You also have to consider differences between firefor and IE. Of course as Ryan points point you have to be careful with padding and margins and factor this in. For example if you have a top padding of 10%, you have to take that into account otherwise your wrapper will expand beyong the browsers viewport