全屏幕背景幻燈片搞亂響應式的粘腳footer

我想在它的位置放置一個粘腳，但我的全屏幕背景幻燈片以某種方式將它移動到內容下。我正在關注來自此網站的響應式粘性頁腳教程Sticky footer tutorial，其中頁面內容設置爲display:table，頁腳設置爲display:table-row。這很有效，直到我將我的幻燈片展示給圖片。一旦我刪除幻燈片粘滯頁腳的作品！有沒有辦法解決這個問題，並保持粘腳在底部？你可以在這裏看到問題link with the problem。全屏幕背景幻燈片搞亂響應式的粘腳footer

我的CSS和HTML是

<!DOCTYPE html> 
<html> 
    <head> 
     <title> HTML Structure</title> 
     <script type="text/javascript" src="/jquery-2.1.4.min.js"></script> 
     <script type="text/javascript" src="/jquery-bgstretcher-3.3.1.min.js"></script> 
     <style> 
     html { 
     height: 100%; 
     overflow: hidden; 
     } 

     body { 
     height: 100%; 
     overflow: scroll; 
     -webkit-overflow-scrolling: touch; 
     } 

     .site { 
     display: table; 
     height: 100%; 
     table-layout: fixed; 
     width: 100%; 
     } 

     .site-content { 
     width: 100%; 
     color:#FBF7F7; 
     text-align:center; 
     background:#2DEFEC repeat; 
     height:200px; 
     margin-bottom:10px; 
     } 

     .site-footer { 
     display: table-row; 
     height: 1px; 
     background:#2A1818 repeat; 
     width:100%; 
     color:#FBF7F7; 
     text-align:center; 
     } 

     .bgstretcher-area { 
     text-align: left; 
     } 
     .bgstretcher { 
     background: black; 
     overflow: hidden; 
     width: 100%; 
     position: fixed; 
     z-index: 1; 
     } 
     .bgstretcher, 
     .bgstretcher ul, 
     .bgstretcher li { 
     left: 0; 
     top: 0; 
     } 
     .bgstretcher ul, 
     .bgstretcher li { 
     position: absolute; 
     } 
     .bgstretcher ul, 
     .bgstretcher li { 
     margin: 0; 
     padding: 0; 
     list-style: none; 
     } 
     /* Compatibility with old browsers */ 
     .bgstretcher { 
     _position: absolute; 
     } 
     .bgs-description-pane { 
     display: block; 
     background: rgba(0, 0, 0, 0.7); 
     position: relative; 
     z-index: 10000; 
     padding: 15px; 
     color: #ffffff; 
     font-size: 14px; 
     }  
     </style> 
    </head> 
    <body> 
     <div id="page" class="hfeed site"> 
      <header id="masthead" class="site-header" role="banner"></header> 
      <div id="content" class="site-content">I am just some content!</div> 
      <footer id="colophon" class="site-footer" role="contentinfo">I am a footer</footer> 
     </div> 
    </body> 
    <script type="text/javascript"> 
     jQuery(function($){ 
     $("body").bgStretcher({ 
     images: ["/1-1.jpg", "/2-1.jpg"], 
     imageWidth: 1024, 
     imageHeight: 768 
     }); 
     }); 
     </script> 
</html>

來源

2015-10-01 yathrakaaran

你應該以有粘頁腳正常工作構成一個完整的表格佈局。查看以下簡化演示並閱讀內嵌評論，看看你是否缺少重要的東西。

jsfiddle

html, body, #page { 
 
    height: 100%; /*make the elements to cover the whole page height*/ 
 
    margin: 0; 
 
} 
 
#page { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.site-header, 
 
.site-content, 
 
.site-footer { 
 
    display: table-row; /*for all the three sections*/ 
 
} 
 
.site-content { 
 
    height: 100%; /*push header and footer to their minimum height */ 
 
    background: silver; 
 
}

<div id="page" class="hfeed site"> 
 
    <header id="masthead" class="site-header" role="banner">header</header> 
 
    <div id="content" class="site-content">I am just some content!</div> 
 
    <footer id="colophon" class="site-footer" role="contentinfo">I am a footer</footer> 
 
</div>

更新，即使用jQuery插件OP的，增加周圍#page一些div容器，所以無論它們都設置爲height:100%;，或者乾脆設置#page{height:100vh;}修訂jsfiddle。

來源

2015-10-01 00:16:37 Stickers

Pangloss，謝謝你的回答。是的粘滯腳註工作，但只有當幻燈片腳本不存在的代碼。只要添加幻燈片腳本及其CSS，頁腳就會混亂起來。我已更新了您的簡化完整表格的鏈接。但正如你可以看到不幸的是，頁腳在頂部。再次感謝... – yathrakaaran

嘗試這種'#page {height：100vh;}'，它不能使用視口單元，您需要使用瀏覽器開發工具來查找＃頁面的所有父元素並設置他們都「身高：100％」，顯然這個插件增加了許多div特性。 – Stickers

！工作正常！非常感謝你的幫助！我是新手，所以我想了解這一點，你能告訴我爲什麼這有效嗎？爲什麼vh在#page上運行vs 100％？ – yathrakaaran

全屏幕背景幻燈片搞亂響應式的粘腳footer

回答

相關問題