I have seen a couple other posts similar to mine, so I'm sorry for asking same question again. However, I am really a massage therapist trying to be a web developer for my own site. Thanks for your patience and help in advance. I am trying to get the blue and white background color of sidebar and main content all the way to bottom of viewport. Some of my pages will have more content than others, so in some cases it won't be a problem. However, on the home page, there is only a small amount of text in content div, and only the nav in sidebar. Any help would be much appreciated.
My code is as follows:
HTML
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>University Neuromuscular Massage</title>
<link href="main.css" rel="stylesheet" type="text/css"><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } 
ul.nav a { zoom: 1; }  
</style>
<![endif]-->
</head>

<body>

<div class="container">
  <div class="sidebar1">
    <ul class="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Meet Our Therapists</a></li>
      <li><a href="">Services</a></li>
    </ul>
    
    <!-- end .sidebar1 --></div>
  <div class="content">
    <img src="_images/UNM_logo.jpg" alt="University Neuromuscular Massage" name="logo" width="610" height="417" id="logo">
    <h2 id= "tagline">Restoring Balance, One Massage at a Time</h2>
    <p>The main focus here at U.N.M. is to help our clients achieve their pain relief goals.  All of our therapists are Licensed Massage and Bodywork Therapists in the state of North Carolina, as well as being trained in neuromuscular therapy.  This specific approach to the body allows us to tailor each massage to each person's specific needs.  Assessing posture and gait (walking process) allows us to target specific muscles and connective tissue that are pulling you out of balance.  Once the body is back in balance, your weight is placed back onto your bones instead of forcing your muscles to do all the work of holding you upright.</p>
  <!-- end .content --></div>
  <!-- end .container --></div>
</body>
</html>
and CSS:
Code:
@charset "utf-8";
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-color: #4E5869;
	margin: 0;
	padding: 0;
	color: #000;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	
	padding-right: 15px;
	padding-left: 15px;
}
a img {
	border: none;
}


a:link {
	color:#414958;
	text-decoration: underline;
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}


.container {
	width: 80%;
	height:100%;
	max-width: 1260px;
	min-width: 780px
	background-color: #FFF;
	margin: 0 auto;
	overflow: hidden; 
}


.sidebar1 {
	float: left;
	width: 20%;
	background-color: #005BAA;
	padding-bottom: 10px;
	padding-top: 20px;
}
.content {
	padding: 10px 0;
	width: 80%;
	float: left;
}
img#logo {
	display: block;
	margin:0 auto;
	padding-bottom: 15px;
}
#tagline {
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	color: #A10C10;
}

.content ul, .content ol { 
	padding: 0 15px 15px 40px; 
}


ul.nav {
	list-style: none;
	border-top: 1px solid #666; 
	margin-bottom: 15px;
}
ul.nav li {
	border-bottom: 1px solid #666; 
}
ul.nav a, ul.nav a:visited {
	padding: 5px 5px 5px 15px;
	display: block;
	text-decoration: none;
	background-color: #8090AB;
	color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
	background-color: #9E9FA3;
	color: #FFF;
}


.fltrt {  
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat {
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}