Question

我收到了一项工作任务，即使用bootstrap创建一些迷你网页布局。我决定基于已经完成的布局（Amoeba）。以下是预览：Amoeba bootstrap link

嗯，在localhost上几乎可以工作，除了一件事 - 页脚。只需查看提供的链接，然后：点击投资组合（从导航），然后通过摄影过滤图库。当你向下滚动时，你会看到丑陋的空间。这是我的问题。我不想那样。所以我认为我需要一个页脚OR组合div类，它会自动调整大小到合适的大小。我不知道怎么做到这一点。有什么提示吗？

Answer 1

我不确定原因，但您的body元素会获得一些height内联样式。无论如何，这是你的问题的解决方案：

body {
    height:100% !important; // inline styles, so you need to add "!important" here
    position:relative;
}

#footer {   
    position: absolute;
    width: 100%;
    bottom: 0px;
}

如果您不想向wrapper div元素添加position:relative和height:100%!important属性，也可以添加body。只看到它是如何工作的，为你选择一个更好的选择。

Answer 2

您只需稍微更改modernizr的代码即可。将forceHeight更改为false并将正常工作。

if (Modernizr.mq("screen and (max-width:1024px)")) {
        jQuery("body").toggleClass("body");

} else {
    var s = skrollr.init({
        mobileDeceleration: 1,
        edgeStrategy: 'set',
        forceHeight: false,
        smoothScrolling: true,
        smoothScrollingDuration: 300,
            easing: {
                WTF: Math.random,
                inverted: function(p) {
                    return 1-p;
                }
            }
        }); 
}

bootstrap 3 - 不将页脚推到页面底部

2 个答案: