JQuery ScrollTo not working with Height and Width 100%

Question

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

Answer 1

Wow I was being a giant numpty, slightly embarrassing but found the following in the middle of my css:

html {
    overflow: hidden;
    height: 100%;
}

This is certainly what was causing the problem, issue solved!