Question

所以关于如何制作页脚有很多问题，我尝试了一些，但它们没有用，我认为因为我使用的框架中的CSS是一个不同的用例。我正在使用Google的Material Design Lite ：http://www.getmdl.io/index.html。

这是一个显示基本页面布局的小提琴：https://jsfiddle.net/zrqeskLk/。

我所追求的：如果页面内容小于屏幕高度，则页脚位于屏幕底部。如果页面的内容大于屏幕高度，则页脚会附加到页面内容的末尾。

The <footer> tag cannot be moved to the final page element, if that is a suggestion.

Answer 1

我已经为你写了一小段jQuery，它可以完全按照你想要的那样。

//store the content's height and footer in variables
var contentHeight = $('.mdl-grid').height(),
footer = $('.mdl-mini-footer');
//Check content's height vs window-height
if (contentHeight < $(window).height()) {
    //add class that puts the footer at the bottom if the check is true
    footer.addClass('bottomstick');
} else {
    //remove class that puts the footer at the bottom if the check is false
    footer.removeClass('bottomstick');
}

这段代码需要进行一些调整（例如，当内容处于高于窗口的边缘时，它可能会有所不同），但是它开始你肯定能够继续！

通过删除并添加我在Hello World下插入的Lorem Ipsum，在this fiddle中尝试一下。你还可以看到我添加了一点CSS，所以它实际上坚持到底。

此外，此代码纯粹是检查页面的加载，而不是之后。因此，如果用户调整他/她的窗口大小，则不会更改页脚。这很容易添加，但如果您需要帮助，请告诉我。

MDL框架中的强制页脚将粘贴到页面底部

1 个答案: