height 100% in Chrome
This works perfect for me on every browser :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>min-height test</title> <style type="text/css"> html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; } #div { min-height: 100%; background-color: gray; } </style></head><body> <div id="div">test</div></body></html>Can you provide more details?
Edit
Here is the updated version based on the provided information :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>min-height test</title> <style type="text/css"> html, body { padding: 0px; margin: 0px; height: 100%; text-align: center; } .contents { height: 100%; width: 780px; margin-left: auto; margin-right: auto; text-align: left; } #right { float: left; width: 217px; min-height: 100%; background:#4b805b; } </style></head><body> <div class="contents"> <div id="right">test</div> </div></body></html>Still everything looks fine for Chrome, Firefox and IE8
From http://doctype.com/give-two-nested-divs-100-minheight:
The child element inherits the height of the parent container only if it is specified explicitly. But min-height is not an explicit specification of height, so the computed height is "auto" and not 100%.
You have to specify your parent with 100% height as well as the child so
html,body{ height: 100%;}#div{ min-height: 100%; height: auto !important; height: 100%; /*for IE*/}The !important will overwrite all other height rules. Try that you should have no problems.