Question

我正在尝试将粘性页脚放置在其位置，但我的全屏幕背景幻灯片以某种方式将其移动到内容下方。我正在关注此网站Sticky footer tutorial的响应式粘性页脚教程，其中页面内容设置为display:table，页脚设置为display:table-row。这很有效，直到我将幻灯片介绍到图片中。一旦我删除了幻灯片，粘性页脚就可以了！有没有办法解决这个问题，并将粘性页脚保持在底部？您可以在此处查看问题link with the problem。

我的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正在使用，在#page周围添加了一些容器div，因此要么将它们全部设置为height:100%;，要么只需设置#page{height:100vh;} jsfiddle

全屏幕背景幻灯片搞乱响应粘性页脚

1 个答案: