插件更改页面后 HTML 布局和 CSS 不合适

Question

我想在我的站点中插入一个粘性页脚，但它与我正在使用的 js 脚本冲突。 脚本是

skel.init({
    prefix: 'css/style',
    resetCSS: true,
    boxModel: 'border',
    grid: {
        gutters: 50
    },
    breakpoints: {
        'mobile': {
            range: '-480',
            lockViewport: true,
            containers: 'fluid',
            grid: {
                collapse: true,
                gutters: 10
            }
        },
        'desktop': {
            range: '481-',
            containers: 1200
        },
        '1000px': {
            range: '481-1200',
            containers: 960
        }
    }
}, {
    panels: {
        panels: {
            navPanel: {
                breakpoints: 'mobile',
                position: 'left',
                style: 'reveal',
                size: '80%',
                html: '<div data-action="navList" data-args="nav"></div>'
            }
        },
        overlays: {
            titleBar: {
                breakpoints: 'mobile',
                position: 'top-left',
                height: 44,
                width: '100%',
                html: '<span class="toggle" data-action="togglePanel" data-args="navPanel"></span>' +
 '<span class="title" data-action="copyHTML" data-args="logo"></span>'
            }
        }
    }
});

页脚将保留在顶部，直到 init.js 脚本被删除，不幸的是，尽管删除它会删除样式。我想我已经将问题缩小到“断点”内的某个地方，但不知道如何修复。

欢迎提出任何想法。

Answer 1

要么将 footer 移到 #skel-panels-pageWrapper 之外，要么将其设置为 position: fixed。它绝对设置为 #skel-panels-pageWrapper 的子级，它不是全高的。

也可以将 #skel-panels-pageWrapper 设置为 position: absolute 并给它 bottom: 0。