JQuery ScrollTo not working with Height and Width 100%

JQuery ScrollTo not working with Height and Width 100%

I have seen this question asked on here before but with no working
answers, also I imagine my problem is slightly different.
I have got quite a strange issue which I have been trying to work out, I
am fairly sure I have not structured my css correctly but am having issues
finding out where.
If you look at the following template in jsfiddle (ignore broken images)
JSFIDDLE LINK
The height and width of the body is not scrolling, the scrollbar does
appear down the right side but is unscrollable (am using a custom
scrollbar). I realise this is to do with the body not inheriting a height
most likely due to my floating div's.
I have been playing around with a clearfix div which I am still trying to
make work, understandably if I add
height: 100%;
width: 100%;
to my css for my body class the scroll will work, however if I do this the
JQuery ScrollTo stops working
I have put the anchor-link which does the scrollto in the top of this
JSFIDDLE (it is also in the above fiddle but is not visible on the page
and scrolling is broken)
Understandably I need to clean up my code, but any advice on how I can get
out of this situation would be just awesome!
Please let me know if I have not explained very well Thanks, Simon