title: Div height CSS trouble
body: <p>I'm trying to set the size of my wrapping div to be atleast the height of the page and then adjust according to the content if it overlaps.</p>
  
  <p>What I have right now is <code>min-height:100%;</code> but this doesn't exceed page height when content exceeds it.</p>
  
  <p>What is the best way to fix this?</p>
  
  <p>EDIT: Here's my relevant CSS.</p>
  
  <pre><code>#wrapper{width:1000px;min-height:100%;margin:0px auto;background:#F2F2F2;}
  
  header{width:1000px;height:50px;margin:0px auto;}
  
  h1#logo{float:left;margin:5px 5px 0px;padding:0px;font:bold 30px 'Russo One', sans-serif;line-height:32px;}
  h1#logo a, h1#logo a:visited{text-decoration:none;color:#005883;}
  h1#logo a:hover, h1#logo a:visited:hover{color:#BAE5E9;}
  img#logo-badge{vertical-align:middle;margin:-3px -5px 0px -10px;}
  
  
  nav{float:right;font:20px 'Lato', sans-serif;}
  nav ul{float:right;margin:0px;padding:0px;list-style:none;}
  nav li{float:left;}
  nav li:hover{}
  nav a, nav a:visited{height:100%;padding:0px 20px 0px;display:block;text-decoration:none;color:#FFFFFF;}
  nav a:hover, nav a:visited:hover{background:;color:#BAE5E9;}
  
  #content{min-height:100%;float:left;margin:0px auto;}
  
  #main-content{width:700px;min-height:100%;float:left;padding:0px 15px;}
  #main-content h1{color:#515151;margin:0px;padding:0px;border:1px solid #515151;border-top:0px;border-right:0px;border-left:0px;}
  
  #demo-src{border-top:1px solid #D7C7B2;border-bottom:1px solid #D7C7B2;text-align:right;}
  #sidebar{width:270px;min-height:100%;float:left;}
  
  #footer{width:100%;float:left;}
  </code></pre>