5 replies [Last post]
dappy
dappy's picture
Offline
Regular
United States
Last seen: 12 years 42 weeks ago
United States
Timezone: GMT-4
Joined: 2005-02-18
Posts: 50
Points: 0

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.

Page with problem

Css

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.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 17 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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).

dappy
dappy's picture
Offline
Regular
United States
Last seen: 12 years 42 weeks ago
United States
Timezone: GMT-4
Joined: 2005-02-18
Posts: 50
Points: 0

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

dappy
dappy's picture
Offline
Regular
United States
Last seen: 12 years 42 weeks ago
United States
Timezone: GMT-4
Joined: 2005-02-18
Posts: 50
Points: 0

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

DanA
DanA's picture
Offline
Elder
Last seen: 9 years 37 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

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%;
}

dappy
dappy's picture
Offline
Regular
United States
Last seen: 12 years 42 weeks ago
United States
Timezone: GMT-4
Joined: 2005-02-18
Posts: 50
Points: 0

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