Question

我有一个简单的容器div没有伸展到最小高度的问题：在我的角度材料项目中是100％。

我在这里创建了一个codepen： Codepen

问题是我在内容保留div中有不同数量的内容（在原始项目 ng-view 中），因此需要min-height 100%-footerHeight-headerHeight填满整个屏幕并在底部有一个粘性页脚。

提前致谢。

编辑：

也许我不够清楚：我希望页脚始终显示在内容下方，如果内容很少，它应该粘在底部。因此，让内容保持div填充使用：min-height：calc（100％-footerHeight-headerHeight）的高度就是这个想法。

编辑2：

我得到了firefox和chrome的工作，我得到了答案。不幸的是，通过这种新方法，我仍然在safari中遇到同样的问题。这是一个新的 Codepen

Answer 1

DEMO 您应该使用flex

CSS

body{
  display: flex;
  flex-direction: column;
  height: 100%;
}

在你的html中，我删除了所有高度样式，基本上都是用这种结构来的

<body>
   <md-toolbar></md-toolbar>
   <div flex>your contents here</div>
   <footer></footer>
</body>

有角度的材质有一个指令属性flex，它使应用的元素变为flex-grow: 1，它基本上占用了其兄弟高度后的所有剩余空间

有关flex

的更多信息

你提出这个问题的方式非常好，请继续关注。

Answer 2

在样式表中添加：

#footer {
    background-color: black;
    color: white;
    width: 100%;
    position: absolute;
    bottom: 0;
}

页脚会粘在底部。帮助这个希望。

Answer 3

您可以使用j来解决问题。

var main = document.getElementById('main');
var content = document.getElementById('content');
var footer = document.getElementById('footer');
var remainHeight = main.offsetHeight - content.offsetHeight - footer.offsetHeight;
document.getElementById('footer').style.marginTop = remainHeight + 'px';

#main中的div有height: 100%。 #content中的div有ng-view个等级。

您也可以在控制器中编写它。

Answer 4

我终于找到了一个解决方案（适用于所有浏览器，包括移动设备！），这看起来绝对合理和简单。我有以下html结构和css：

HTML：

<div id='nav'></div>
<md-content scroll flex layout='column'>
<div id='content' ng-view flex>
</div>
<div id='footer'>
  <footer>Footer</footer>
</div>
</md-content>

的CSS：

* {
  margin: 0;
}
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
#nav {
  z-index: 2;
}
#content {
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto;
}

Angular Material ng-view在徒步旅行中拉伸div min-height css 100％

4 个答案: