[Solved] Full Height Page Doesn't Work. What am I missing?

[SAiNT]

Greetings people, I have this weirdest problem that i can’t solve for the second day :((

http://someimage.com/Pq3ZP6K http://someimage.com/YCAYciU

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 be in 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; }

Would appreciate any help. Thanks in advance, Maximus

[Designer42]

Do you have a live site up or a Code Pen example?

[SAiNT]

Hello Designer42 and thanks for your reply,
I cut off all the blocks inside and left only the two main blocks (sidebar and content):
http://mainroom.pro/share/code/pen.html

Thanks

[wolfcry911]

setting the height to 100% on html and body is relative to the viewport – not the document. Try setting min-height to 100% instead, set body to position: relative, and add bottom: 0 to the nav.

[SAiNT]

setting the height to 100% on html and body is relative to the viewport – not the document

• that explains it. i get it now :(

Try setting min-height to 100% instead, set body to position: relative, and add bottom: 0 to the nav

yeah it did the trick, nice solution. but being a perfectionist, the only thing that bothers me – is it really okay to go with relatively positioned body?

Thank you very much

[SAiNT]

also wanted to share this little solution on jQuery that i found here:
http://stackoverflow.com/questions/8797785/set-column-to-full-height-of-the-page

basically:
$('#Block').height($(document).height());
doesn’t work in my case, but might be helpful to those struggling with similar problem

and a few more links on the subject:
http://tympanus.net/codrops/2013/07/17/troubleshooting-css/#article-width-height
http://www.dave-woods.co.uk/index.php/100-height-layout-using-css/

[wolfcry911]

Yes, its perfectly fine to set the body to position: relative.

[SAiNT]

ok, thanks again ;-)

[Author]

Posts