全屏背景幻燈片弄亂了響應式粘頁腳

Question

我試圖將粘性頁腳放置在其位置，但我的全屏背景幻燈片以某種方式將其移至內容下方。 我正在關注此站點的“ 粘性頁腳”教程，其中頁面內容設置為display:table ，頁腳設置為display:table-row 。 在將幻燈片演示介紹給圖片之前，此方法效果很好。 刪除幻燈片后，粘性頁腳就會起作用！ 有沒有一種方法可以解決此問題，並在底部保留粘性頁腳？ 您可以在此處實時查看問題所在與問題的鏈接。

我的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>

Answer 1

您應該進行完整的表格布局，以使粘性頁腳能夠正常工作。 請查看以下簡化的演示並在線閱讀評論，看看是否有任何重要的遺漏。

的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正在使用的Update在#page周圍添加了一些容器div，因此可以將它們全部設置為height:100%; ，或簡單地設置#page{height:100vh;}修改后的jsfiddle 。

全屏背景幻燈片弄亂了響應式粘頁腳

問題描述

1 個解決方案

解決方案1
1 已采納 2015-10-01 00:16:37

全屏背景幻燈片弄亂了響應式粘頁腳

問題描述

1 個解決方案

解決方案1 1 已采納 2015-10-01 00:16:37

解決方案1
1 已采納 2015-10-01 00:16:37