Why does Sticky Footer break when I wrap it in 2 divs? - css

Question

I was trying to implement sticky footer with zurb foundation 5.5.3 off-canvas menu for hours and I can't figure out what's causing the error.
Sticky footer works: https://codepen.io/marko_avlijas/pen/dWBJVM
When I wrap it in off canvas menu, it doesn't: https://codepen.io/marko_avlijas/pen/vmqpey
This is minimal html and css, so this question doesn't depend on codepen.
HTML
<div class="wrapper">
<div class="content">
<h1>Sticky Footer of Unknown Height (no javascript)</h2>
<button id="button-show">Toggle Content</button>
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>
CSS
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
}
.content {
display: table-row;
height: 100%;
/* ...as content is added (won't scroll) */
}
.footer {
display: table-row;
}
Broken HTML
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<!-- This part is same like before -->
<div class="wrapper">
<div class="content">
<h1>Sticky Footer Broken!!!</h2>
<button id="button-show">Toggle Content</button>
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>
</div>
</div>

Answer 1

You need to add:
.off-canvas-wrap, .inner-wrap {height:100%;}
When you are using 100% height, the parent needs to have a fixed height... or if still want it 100%, all parents till htmlneeds 100% to make it work.