使div元素拉伸页面的全高

Question

我已经构建了这个小角度的ap，并希望容器元素能够拉伸页面的整个高度，当内容没有填满页面的高度时，例如在大屏幕上这个页面不会：

http://purepremier.com/#/teams/57

我尝试将其设置为

position: absolute;
top:0;
bottom:0; 
height:100%

但是当内容溢出时，容器的高度仅延伸到视口高度。

有什么想法吗？或者是将角度添加到身体的角度是一种方式吗？

Answer 1

是的，只是

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.container {
  min-height: 100vh;
  background: red;
}

＆＃13;

<div class="container">
</div>

＆＃13;

＆＃13;

＆＃13;

JSfiddle Demo

Support for viewport units

或替代

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
body {
  height: 100%;
}
.container {
  min-height: 100%;
  background: red;
}

＆＃13;

<div class="container">

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

绝对定位不是设置完整文档高度的方法，但它设置为视口高度。您可以改为使用固定位置：

#element{
  position: fixed;
  top:0;
  bottom:0; 
}

Answer 3

html, body {height:100%; min-height:100%; margin:0; padding:0;}
#full {background:red; height:100%;}

<div id='full'>hmm</div>