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

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 文件中滚动处理程序的以下行：

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');

Answer 2

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

在现有代码周围添加包装器 class。使包装器 class 相对定位。获取页脚的高度并明确声明。将与填充底部相同的值分配给包装器 class。

.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 页脚始终位于页面末尾/底部

Google Material Design footer always at the end of the page/ at the bottom

html

css

material-design

material-design-lite