I’ve a simple page with css as follows. I want it to render to full height (div=“main” or “container” should render 100% in height) regardless whether there’s any text included or not (for any browser). How do I do that? The following code doesn’t work. I tried different ways but nothing works…
Please help!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server" xml:lang="en-us">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>my title</title>
</head>
<body>
<form runat="server" id="MainForm">
<div id="main">
<div id="header">My great header</div>
<div id="navigation">Navigation</div>
<div id="contents">
<div id="leftarea">Left Area</div>
<div id="centerarea">
Main Contents
</div>
</div>
</div>
</form>
</body>
</html>
CSS:
html,body
{
height: 100%; min-height: 100%;background: #fff;
}
#main
{
width: 800px;
min-width: 800px;
min-height: 100%;
margin-right: auto;
margin-left: auto;
border: darkgray 1px dotted 1px darkgray;
}
#header
{
height: 100px;
padding-left: 100px;
background: url(../../Images/KPCA.png) #fff fixed no-repeat top left;
}
#navigation
{
height:15px;
width:100%;
background-color: pink;
}
#leftarea
{
width: 20%;
min-height:100%;
float:left;
background-color: Yellow;
}
#centerarea
{
float:right;
background-color: #ccc;
width: 80%;
height:100%;
min-height:100%;
}