Angular Material ng-view stretch div min-height css 100% on safari

Question

我的 angular material 项目中的简单容器 div 没有拉伸到 min-height:100% 时遇到问题。

我在这里创建了一个代码笔： Codepen

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

提前致谢。

编辑：

也许我不够清楚：我希望页脚始终显示在内容下方，如果内容很少，它应该贴在底部。因此，让内容保持 div 填满使用： min-height: calc(100%-footerHeight-headerHeight) 的高度是想法。

编辑 2：

我让它在 firefox 上工作，chrome 我在这里得到了答案。不幸的是，使用新方法我在 safari 中仍然面临同样的问题。这是一个新的 Codepen.

Answer 1

将此添加到您的风格中 sheet:

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

页脚将固定在底部。帮助这个希望。

Answer 2

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>

angular material 有一个指令属性 flex 使得应用元素 flex-grow: 1 基本上占据了所有剩余的 space 在其兄弟姐妹高度被放置后

有关 flex

的更多信息

你提出问题的方式很好，继续保持。

Answer 3

你可以用js来解决你的问题

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

div中的#main有height: 100%。 div中的#content有classng-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 stretch div min-height css 100% on safari

Angular Material ng-view stretch div min-height css 100% on safari

css

safari

footer

angularjs

angular-material