Full Height Page Doesn't Work (CSS body height:100%)

Question

I have this weirdest problem that i can't solve for the second day :((

As you can see I have html and body, with height:100%, which has two children with min-height:100% (height or min-height doesn't matter right now);

• Not only that doesn't work for my sidebar, the Body itself doesn't render to 100% height (as can be seen on the second screenshot). but what really blows my mind here is that adding top:0; bottom:0; to the sidebar still doesn't stretch it, and absolutely positioned elements are not even supposed to relate on the document flow!!! :-o

Things like this usually happen because i missed some tiny, obvious thing; I can think of at least two ways to reach the desired effect ignoring this problem, but i just need to understand what's going - what am i missing?

// Of course I tried to disable all the scripts, normalizers and other stuff - no result...

in case you need to know the #PageWrap properties:

#PageWrap {
max-width: 1400px; min-width: 835px; height: 100%;
padding: 19px 0 0 21px; margin-left: 200px;
background: linear-gradient(to right, rgba(52, 49, 221, 0.2) 0%, rgba(25, 28, 37, 0.2) 100%),
 url("../img/BG_Z.png");
background-position-x: 0px, 309px;
background-size: 300px 100%, 928px 1061px;
background-repeat: no-repeat;
background-attachment: fixed;
}

Answer 1

Would background-size: 300px 100%, 928px 1061px; be causing the problem? try taking out 928px 1061px and see if that works