CSS makes 100% height ? BUT HOW ?

It may have been suggested before but reading through lots of the posts like the ones here got me thinking about the amount of time we all spend on repetitive tasks. So in the same way that the Modx community works together to develop the CMS products and solutions how about we do the same for CSS, templates and web sites. I would welcome your thoughts on the following

Some of us have great design skills, some of us are experts in CSS, some of us are PHP and MYSQL gurus and some of us really know how to get the most out of MODx.

For me I think I am OK on design, Copywriting and CSS layouts. How about we create three Modx templated websites that everyone can use out of the box, a one, two and three column CSS layout based on an agreed structure (Home, Section One, Section two through to section four for example) that would be typical of a small business site. We would create an enquiry form, a small secure log-in area, have the latest news updated on the home page etc etc, as we would all agree.

Then we use this typical content structure to create the designs and CSS for the one, two and three column layouts following an agreed tag naming convention. That way we end up with a complete website starter solution which may be benficial to lots of us and its easy to just style the CSS tag and add images for a complete new layout. All the Modx TV,s and Chunks would also follow agreed naming conventions.

Over time the code would be refined and it would be easier to create new TV’s that would for example take the menus and turn them into drop down menus when you hover that you know would work because this TV would be coded using the Divs and classes arleady being used in the design on the menus.

Its just a thought really but such an exercise may also prove to be a great learning tool as it would cover everything involved in getting a real website working with Modx, which is simply too much for one or two people these days.

I for one stuggle with aspects of Modx, in fairness due to a lack of PHP skills on my part right now and sometimes I am a little embarrased at asking a basic question on the forum when really I still end up seeming to need a tutorial to properly understand eveything about the function

If the above is of interest, I would be willing to help drive this forward ?

I Think that would be cool !

I tried so many other CSS the last days ... ( about 15 or sth. )
and many other had a better layout install handling.

if MODx would have an easy to use template
set it would be very good for all...

i think thats a good idea edge

-----------------------------------------------------------

html, body, #wrapper {
min-height: 100%;
height: 100%;
}
html>body, html>body #wrapper {
height: auto
}

isn’t working for me.
i tried it in my styles and it isn’t working. or im just to dumb.
I thank you for your fast help. you’re cool !

Hi JRA,

There is actually an error in the code I posted. Also to make this CSS work in Firefox you need to position the wrapper absolutely. I tend to use these rules when I want my #wrapper to be positioned absolutely so I have control over the exact position from the top and left of the viewport as well as containing elements. This should also work fine in IE5 upwards from memory

edge,

Will that very simple bit of code actually work in FF/IE6/Safari to:
1) Make "too short" pages fill the browser (that’s obvious it does)
and
2) Make the page scroll with the footer below the viewport when the content is longer than what will fit in the page.

Could you add a margin-bottom: 1px to the html element to make sure there’s always a scrollbar on the page so it doesn’t jump around in some browsers without bad effects?

Hi Ryan,

I am not in a position to test right now, but yes, if you add 1px or 101% then you should always have a scroll bar (And that is a good point).

Positioning the footer
Because the wrapper is absolutely positioned its taken out of normal flow (as I am sure you will be aware) so to simply place this div below the wrapper will not work, it would simply ignore the #wrapper and be placed at the top of the viewport. Usually, when I use a full height wrapper that is positioned I would place my div inside the wrapper. Actually, its really important to do this and make sure the #footer is the last item inside the #wrapper. That wat the footer is alwasy at the bottom of the wrapper div and any content (text, images etc that is added inside the wrapper will also ensure the footer is pushed down. Just set whatever top margin you want on the footer to give you enough space between the actual page content.

Copy and paste this code and you can experiment for yourself.



All said this is not perfect, some browsers such as safari may still render the footer below the content rather than at the bottom of the #wrapper, but it is a compromise solution and it still does not make the site unusable in any way.

If you really want full height and the footer to be at the bottom on all browsers, even old ones, then you may have to use a single table for your layout!

Hope that helps

Quote from: JRA at Jan 07, 2006, 11:01 AM

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

There’s a poll here.