I have literally tried EVERYTHING to get this to work. I've read all other stackoverflow EVERYTHING. 
I'm trying to get a DIV to go all the way to the bottom of the page. As you can see in the jsfiddle (via the side borders) it does not. it seems to stop at a height of 357px which is not the full height. I then find out that my div is 100% of the body because the body is also 357px even though I also specified that it should be 100%. Nothing is working and I'm not sure why. In my previous project I never had that problem. I just specified a min-height and when I added more content pass that min-height the div accompanied it. But this time it just overflows for some reason.

```
html, body {background-color:#F6EBBA;height:100%;position:relative;}
#main-body{
  display:block;
  height:100% !important;
  margin-left:16%;
  margin-right:30%;
  border:1px solid #dead68;
  border-top:none;
  border-bottom:none;
  bottom:0}

```

<http://jsfiddle.net/R96Lc/>

My website had much more content but I had to delete js, css which was not needed and changed the html to so that you could see what I am talking about. 

Thanks in advance.