Html Google Material Design页脚始终位于页面末尾/底部

我目前面临着谷歌材料设计Lite的问题。如果你看一看谷歌的公文包示例，并模拟一个大屏幕，页脚不会停留在底部。有解决办法吗

---

我发现了两个类似的问题，但都是关于粘脚的。我希望页脚始终位于页面的末尾，如果页面可滚动，则页脚应仅在您位于底部时可见。

您需要将设置为特定的

最小高度

到

.mdl网格。公文包最大宽度

就像：

当导航栏很大时，

/**/
.mdl-grid.portfolio-max-width{
最小高度：计算（100vh-316px）；
}
/*当导航栏很小时*/
.mdl-grid.portfolio-max-width{
最小高度：计算（100vh-180px）；
}

这会奏效的

希望这有帮助

编辑

我的最终解决方案：

当导航栏很大时，

/**/
.mdl-grid.portfolio-max-width{
最小高度：计算（100vh-316px）；
显示：块；
}
/*当导航栏很小时*/
.mdl-layout\uuu content.header-is-compact>.mdl-grid.portfolio-max-width{
最小高度：计算（100vh-137px）；
}

以及MDL JavaScript文件中滚动处理程序的以下行：

this.content\uu.classList.add（'header-is-compact'）；
//如果删除了所有类，则将下面的行添加到else
this.content_.classList.remove（'header-is-compact'）如果这是您想要的，请告诉我

在现有代码周围添加包装器类。使包装类相对定位。获取页脚的高度并显式声明。为包装器类指定与padding bottom相同的值

.wrapper{
  position:relative;
  padding-bottom:75px;
}
#textbox {
background:rgba(255,255,255,1);
padding:10px;
font-family:arial;
z-index:-1;
box-shadow:0 0 30px rgba(000,000,000,1);
border-radius:10px;
line-height:25px;
display:block;
}


#footer {
background-color:white;
width:50000px;
position:absolute;
bottom:0px;
left:0px;
color:black;
font-family:arial;
border:0px;
margin:0px;
display:block;

height:75px;
}

“如果页面是可滚动的，那么页脚应该只有在您位于底部时才可见。”谢谢Saurav Rastogi！正如@Goombah指出的，这将使页脚始终粘在页面底部，即使您不在页面底部。@KaRl@Goombah是的！这是我的错。我已经更新了我的答案，这会有用的。您只需根据导航栏的高度更改
min height
的条件。@SauravRastogi感谢您的快速回复。这是一种工作方式。。。导航栏现在位于底部（不完全，但这可能是我的错），但内容框现在被拉伸到底部，没有任何内容。这里是一个截图：@KaRl我认为你做了一些非常错误的事情，如果可能的话，你能在小提琴或密码笔上附加一个链接吗？