爲什麼當我用2個div包裝它時，粘滯頁腳會打破？

我試圖用zurb基礎5.5.3非帆布菜單實現粘腳，幾個小時，我無法弄清楚是什麼原因導致了錯誤。爲什麼當我用2個div包裝它時，粘滯頁腳會打破？

置頂頁腳的工作原理：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>

來源

2017-05-30 Marko Avlijaš

您需要添加：當您正在使用100％的高度

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

，家長需要有一個固定的高度...或者如果仍然想要100％，所有父母直到html需要100％才能使其工作。

來源

2017-05-30 11:27:15

這有效地切斷了每個頁面，你不能滾動摺疊下面，雖然也許只是在基礎？ –

然後，你需要找到另一個解決方案，讓你的頁腳粘滯。我的答案你的解決你的codepen：https://codepen.io/anon/pen/wdLyGQ但我不知道你的代碼是什麼。也許這些技巧中的一些可能會幫助你：https://css-tricks.com/couple-takes-sticky-footer/ –

謝謝。 Upvoting這個。 –

爲什麼當我用2個div包裝它時，粘滯頁腳會打破？

回答

相關問題