CSS高度：100％无法正常工作

Question

What I want to achieve: When re-sized to mobile view the fly-out navigation should be 100% height, make the div "nav" 100% height of the page regardless of content inside the div "main".

I have tried setting the html, body to 100% height. The wrappers are also at 100% height, but it is not working.

here is my code sample:

http://codepen.io/anon/pen/GHJqh/

Answer 1

You need to assign height:100% to both the html and body for your solution to work. I've also applied it to the outer-wrap but I believe you may need a better solution as this would mess up a sticky footer if you are doing one.

CODEPEN

http://codepen.io/anon/pen/DAfoe/