Expand <div> tag to bottom of page with CSS_问答_开发者

I know this question gets asked a lot because I have looked at many "solutions" trying to get this to work for me. I can get it to work if I hack up the html but I want to use all CSS. All I want is a header with two columns below it, and I want these three items to fill the entire page/screen, and I want to do it with CSS and without frames or tables. The XAMPP user interface looks exactly how I want my page to look, but again, I do not want to use frames. I cannot get the two orangeish colored columns to extend to the bottom of the screen. I do have it so it looks like the right column extends to the bottom of the screen just by changing the body background color to the same color as the background color of the right column, but I would like both columns to extend to the bottom so I didn't have to do that. Here is what I have so far:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>MY SITE</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
<div id="masthead">
    MY开发者_StackOverflow社区 SITE</div>
    <div id="left_col">
        Employee Management<br />
        <a href="Employee%20Management.php">Add New Employee</a><br />
        <a href="Employee%20Management.php">Edit Existing Employee</a><br />
        <br/>
        Load Management<br />
        <a href="Load%20Management.php">Log New Load</a><br />

        <a href="Load%20Management.php">Edit Existing Load</a><br />
        <br/>
        Report Management<br />
        <a href="Report%20Management.php">Employee Report</a><br />
        <a href="Report%20Management.php">Load Report</a></div>


    <div id="page_content">
        <div id="page_content_heading">Welcome!</div>
        Lots of words</div>
</div>
</body>

</html>

CSS

#masthead {
    background-color:#FFFFFF;
    font-family:Arial,Helvetica,sans-serif;
    font-size:xx-large;
    font-weight:bold;
    padding:30px;
    text-align:center;
}
#container {
    min-width: 600px;
    min-height: 100%;
}
#left_col {
    padding: 10px;
    background-color: #339933;
    float: left;
    font-family: Arial,Helvetica,sans-serif;
    font-size: large;
    font-weight: bold;
    width: 210px;
}
#page_content {
    background-color: #CCCCCC;
    margin-left: 230px;
    padding: 20px;
}
#page_content_heading {
    font-family:Arial,Helvetica,sans-serif;
    font-size:large;
    font-weight:bold;
    padding-bottom:10px;
    padding-top:10px;
}
a {
    color:#0000FF;
    font-family:Arial,Helvetica,sans-serif;
    font-size:medium;
    font-weight:normal;
}
a:hover {
    color:#FF0000;
}

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #CCCCCC;
}

Something like this should work

<div id="header" style="position:absolute; top:0px; left:0px; height:100px; width:100%; overflow:hidden; background-color:#00FF00">
</div>
<div id="leftnav" style="position:absolute;top:100px; left:0px; width:100px; bottom:0px; overflow:auto;background-color:#0000FF">

</div>
<div id="content" style="position:absolute;top:100px; left:100px; bottom:0px; right:0px; overflow:auto;background-color:#FF0000">
</div>

Well, this is your code altered to fit what you want:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>MY SITE</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <style type="text/css">
        html, body {padding:0;margin:0;background-color:#CCCCCC;height:100%;}
        #hd{position:absolute;top:0;left:0;width:100%;height:100px;background-color:green;z-index:1;}
        #col{float:left;width:230px;height:100%;background-color:red;}
        #bd{width:100%;height:100%;background:pink;}
        .content{padding:100px 0 0 230px;}
    </style>
    </head>
    <body>
        <div id="hd">MY SITE</div>
        <div id="col">
            Employee Management<br />
            <a href="Employee%20Management.php">Add New Employee</a><br />
            <a href="Employee%20Management.php">Edit Existing Employee</a><br />
            <br/>
            Load Management<br />
            <a href="Load%20Management.php">Log New Load</a><br />

            <a href="Load%20Management.php">Edit Existing Load</a><br />
            <br/>
            Report Management<br />
            <a href="Report%20Management.php">Employee Report</a><br />
            <a href="Report%20Management.php">Load Report</a>
        </div>
        <div id="bd">
            <div class="content">
                Lots of words
            </div>
        </div>
    </body>
</html>

Please not that inside containers like the one on the body div may be required to allow proper format of your html elements!

Hope this helps... :)