谷歌材料设计底部总在页面末尾/底部

Question

我目前正在使用Google Material Design Lite时遇到了一个问题。如果您查看来自Google的 https://getmdl.io/templates/portfolio/about.html 的投资组合示例并模拟一个大屏幕，页脚不会保持在底部。是否有解决方法？

我找到了两个类似的问题，但它们都涉及到粘性页脚。我想让页脚始终在页面底部，如果页面可滚动，则只有在您到达底部时才能看到页脚。

- Ka Rl

Answer 1

您需要为.mdl-grid.portfolio-max-width设置一个特定的min-height,

就像这样:

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

- Saurav Rastogi

---

如果页面可以滚动，页脚应该只在您到达底部时可见。 - Goombah

谢谢Saurav Rastogi！正如@Goombah指出的那样，这将使页脚始终保持在页面底部，即使您不在页面底部。 - Ka Rl

@KaRl @Goombah 是的！这是我的错。我已经更新了我的答案，这将起作用。您只需要根据导航栏的高度更改“min-height”的条件即可。 - Saurav Rastogi

@SauravRastogi 感谢您的快速回复。它有点起作用...导航栏现在在底部（不完全，但这可能是我的问题），但内容框现在被拉伸到底部而没有任何内容。这是一个截图：http://imgur.com/a/Tyo7b - Ka Rl

@KaRl，我认为你做错了什么事情，如果可能的话，能否请附上一个fiddle或codepen的链接？ - Saurav Rastogi

Answer 2

请告诉我这是否是您想要的

在现有代码周围添加一个包装类。将包装类相对定位。获取页脚的高度并显式声明。将相同的值分配为包装类的底部填充。

.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;
}

- user3260487