Thu, 2005-12-29 15:01
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.
Thu, 2005-12-29 17:24
#1
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).
Thu, 2005-12-29 18:30
#2
100% height - resize window problem
Quote:
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
Thu, 2005-12-29 18:36
#3
100% height - resize window problem
Quote:
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
Thu, 2005-12-29 20:32
#4
100% height - resize window problem
Quote:
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%;
}
Thu, 2005-12-29 20:53
#5
100% height - resize window problem
DanA wrote:
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:
Quote:
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