CSS Tutorial - Dimensions

height

With 'height' we can set the height of an element, either in absolute (px) or in relative (%, em) units. Negative valuees are not allowed.


					height:150px;

Height in relative units (like height:50%; doesn't work in most browsers, at least not if there is no parent element, that does have an absolute height.
Like here: The red box has the height set to the relative height of 40%. It does work, since the parent (containing) element has the absolute height set to 200 pixels.

					<div style="height:200px; ">

						Hello, I am 200 pixels tall and contain another div (that makes it a child element).

						<div style="height:40%; ">

							Hello, I'm the child and I have my height set to 40%.
						
						</div>
					
					</div>

Hello, I am 200 pixels tall and contain another div (that makes it a child element).

Hello, I the child and I have my height set to 40%.

Here the red box has the height still set to 40%. But since the parent element has set the height to a relative height, too (100%), it doesn't work: It doesn't know from what to calculate that percentage of height.

					<div style="height:100%; ">

						Hello, my height is set to 100% and I contain another div (that makes it a child element).

						<div style="height:100%; ">

							Hello, I am the child and I have my height set to 40%.
						
						</div>
					
					</div>

Hello, my height is set to 100% and I contain another div (that makes it a child element).

Hello, I am the child and I have my height set to 40%.