0

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/

AntonB
  • 2,724
  • 1
  • 31
  • 39
  • Possible duplicate of http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window ? – Kody Apr 14 '14 at 01:40
  • the other issue is when this line of code from #outer-wrap is removed, "overflow:hidden", the fly-out navigation then becomes scrollable, which on a phone should not be scrollable. – AntonB Apr 14 '14 at 01:45

1 Answers1

0

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/

3066d0
  • 1,853
  • 1
  • 14
  • 18
  • notice when you try to add content to the page, the extra content is hidden on #outer-wrap. The problem is I want to scroll the content but the off-canvas nav should not be scrollable in the Y axis in mobile view - http://codepen.io/anon/pen/xuHeD/ – AntonB Apr 14 '14 at 02:33
  • Hmm, Maybe you can try something similar to what I do on my site, Both elements sit inside the outer-container but the content div is a proxy window. Inspect the code at www.aktof.ca – 3066d0 Apr 14 '14 at 14:41