hi folks,
is it possible that a div can be 100% and if nothing is in that div or the content of the div is less the height should remain 100% with the given property like say background color is white of that div. how can i do that?
See the FAQ on 100% height for a full explanation (the link to the faq is in my sig).
You can only use height:100% if the parent has a height defined. If the parents height is defined by content alone then it has no height to base the child on and will collapse to auto.
If the parent has a fixed height the you can base a child on that height. e.g. if parent is height:200px then the child could be height:100%.
If the parent’s height is based on a percentage then it must also have a parent with a defined height and so on all the way up the tree.
Even if the parent has a fixed height the setting a child to height:100% would mean the child could never grow and would spill out of the parent.
Suffice to say that you can’t use height:100% apart from the very first element on the page and then you can base a min-height:100% on html,body{height:100%;margin:0;padding:0}.
Only absolute elements can base 100% height on a div that has height auto and has limited use as they can’t contain content. They can be utilised for equal column background colours though.
If you are looking for equal column effects then you can use my technique above or the faux column technique of repeating a background image on a parent that holds the columns.
thnx paul
Thuogh paul. The requirment of my web app as told to me have left me confused. as it should be 1280*800. and the web app is all based of tables coz of tabular data (u have seen it live many times, while helping me). now of different browser there might be or not be toolbars which will of course cut the space which i defined. which will result in my footer part being cut off (or any other). for a moment i get lost on how to to satisfy the needs. coz every person has no or many toolbars
Hi, for consistant results you could always just force scrollbars 
html{overflow-y:scroll;}
I don’t know if you want the X axis scrollbar so I didn’t include it above
What about mobile devices? lol.
For me this is the age-old question… and trying to explain it to clients seems to stupify them. The adage ‘I want it to look the same for everybody’ just doesn’t hold any water.
The bottom line is that some people will have to scroll. According to your 1200+ width ALOT of people will have to scroll (depending on which demographic you are targeting). I’ve found its best to MAKE the client look at the design on a small 15" monitor, then make them look at it on a large monitor 23"+. Sometimes this makes the lightbulbs come on for them. Sometimes it just confuses them more.
If you know your users will have javascript enabled you can do some window detection with that then adjust your css properties accordingly. But not knowing exactly who/what you are targeting I can’t really give any further guidance as to that.
scroll’s are a big no in my web app requirement.
Well there’s no way to ensure that every singke page won’t have scrollbars. Even if you design to fit within the viewport they could always make hte viewport smaller via resizing the browser.
They could resize text thus making it too big.
They could do any numbero f things to force scrollbars. Realistically you have to realize that scrollbars must not be feared
lol tell them to my boss. thought what i want is everything smooth and without anything cutting it. basically i want a perfect showing of everything at 1280* 800
If this is an intranet site where hte monitors are all the same size then this could feasibly be done (though still very breakable via user text increase/zoom)
Get your boss on here to read this thread and I’ll explain it to him