Question

我目前正面临Google Material Design Lite的问题。如果您查看Google https://getmdl.io/templates/portfolio/about.html的投资组合示例并模拟大屏幕，则页脚不会停留在底部。有解决方案吗？

我发现了两个类似的问题，但它们是一个粘性页脚。我希望页脚始终位于页面的末尾，如果页面是可滚动的，则只有当您位于底部时才能看到页脚。

Answer 1

您需要将特定min-height设置为.mdl-grid.portfolio-max-width，

就像：

/* When the Navbar is big  */
.mdl-grid.portfolio-max-width {
  min-height: calc(100vh - 316px);
}

/* When the Navbar is small  */
.mdl-grid.portfolio-max-width {
  min-height: calc(100vh - 180px);
}

这样可行。

希望这有帮助！

修改

我的最终解决方案：

/* When the Navbar is big */ .mdl-grid.portfolio-max-width { min-height: calc(100vh - 316px); display: block; } /* When the Navbar is small */ .mdl-layout__content.header-is-compact > .mdl-grid.portfolio-max-width { min-height: calc(100vh - 137px); }

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

＆＃13;
＆＃13;
this.content_.classList.add('header-is-compact'); // the following line to the else if where all the classes get removed this.content_.classList.remove('header-is-compact');
＆＃13;
＆＃13;
＆＃13;

Answer 2

如果这是你想要的，请告诉我

在现有代码周围添加包装类。使包装类相对定位。获取页脚的高度并明确声明。将与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;
}

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

2 个答案: