Sticky Footerが2 divで折り返すと、なぜそれが壊れますか？

Question

私は何時間もzurb foundation 5.5.3オフキャンバスメニュー付きのスティッキーフッタを実装しようとしていましたが、エラーの原因を突き止めることはできません。

スティッキーフッター作品：https://codepen.io/marko_avlijas/pen/dWBJVM
私はオフキャンバスメニューでそれをラップすると、それはしていません：https://codepen.io/marko_avlijas/pen/vmqpey

これは、最小限のHTMLとCSSであるので、この質問は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; 
} 

あなたが追加する必要が壊れた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

：

.off-canvas-wrap, .inner-wrap {height:100%;} 

あなたは、親のニーズを100％の高さを使用しています固定された高さを持っている...またはそれでも100％を望むなら、htmlまでのすべての親がそれを動作させるために100％必要とする。