Hey everybody,
I'm having an odd issue with my 100% height. I am using XHTML transitional - validated and the CSS validates. I used the little html, body 100% then made my div 100% trick from positioniseverything - I think. It works fine. However when I add the large chair image in the background position: absolute to pull it out of the flow I get problems that I cannot seem to fix.
The problem occurs on FF and IE 6. When the user resizes the window, funny things happen to the 100% and my borders and div background don't extend to the bottom of the window when you have to scroll. I don't know how to better explain without someone doing it on the page.
Thanks for any help
Dappy
Edit: I didn't realize until now that if the content extends beyond the browser window the problem will still occur. Whether you resize it smaller or not.
100% height - resize window problem
"height:100%" means 100% of the browser window. If the page beyonds the browser window (ie. needs scrolling to access) those bits of the page are outside the elements set to height:100%. Which if you have backgrounds or other effects (e.g. borders) won't extend beyond the first 100%.
The correct way to handle things is
selector {min-height: 100%;} /* for proper browsers */
* html selector {height: 100%;} /* for IE */
If you use min-height in this way, you must ensure all the antecedent elements have a fixed height of 100% (ie. html & body).
100% height - resize window problem
The correct way to handle things is
selector {min-height: 100%;} /* for proper browsers */
* html selector {height: 100%;} /* for IE */
html, body { height:100%; } #mainBody { position:relative; color:#FFFFFF; font:normal 11px/18px Arial, Verdana, sans-serif; width:700px; min-height:100%; background-color:#000000; border-left:1px solid #f58136; border-right:1px solid #f58136; }
This is what I have on it now. Still doesn't look correct. It may be rendering properly (by CSS spec) and I just don't fully understand it. Perhaps there is a better way to achieve what I want? Which is the black space of the content with the orange left/right border to always be the height of the window and scroll...background image?
Thanks
Dappy
100% height - resize window problem
The correct way to handle things is
selector {min-height: 100%;} /* for proper browsers */
* html selector {height: 100%;} /* for IE */
html, body { height:100%; } #mainBody { position:relative; color:#FFFFFF; font:normal 11px/18px Arial, Verdana, sans-serif; width:700px; min-height:100%; background-color:#000000; border-left:1px solid #f58136; border-right:1px solid #f58136; }
This is what I have on it now. Still doesn't look correct. It may be rendering properly (by CSS spec) and I just don't fully understand it. Perhaps there is a better way to achieve what I want? Which is the black space of the content with the orange left/right border to always be the height of the window and scroll...background image?
Thanks
Dappy
100% height - resize window problem
selector {min-height: 100%;} /* for proper browsers */
* html selector {height: 100%;} /* for IE */
means for #mainbody :
#mainBody { position:relative; color:#FFFFFF; font:normal 11px/18px Arial, Verdana, sans-serif; width:700px; min-height:100%; background-color:#000000; border-left:1px solid #f58136; border-right:1px solid #f58136; } * html #mainBody { height:100%; }
100% height - resize window problem
means for #mainbody :
I understand - I just didn't post my IE specific code since it's in a seperate style sheet and it doesn't work in FF anyway yet. Also this:
If you use min-height in this way, you must ensure all the antecedent elements have a fixed height of 100% (ie. html & body).
led me to believe that the parent elements had to have a fixed height also....?no?
Dappy