css - 使用 CSS 给一个绝对元素 100% 浏览器高度

Question

我有一个使用位置绝对元素的叠加层。 overlay 元素可以包含比视口(viewport)中内容更多的内容，因此位置固定并不能解决问题。目前叠加层的背景颜色只是视口(viewport)的大小，而不是浏览器的大小。这会弄乱内容。

检查 plunker 的例子，http://plnkr.co/edit/r37LE4BhvW7UkNWPfsJN?p=preview

html, body{
  margin: 0px;
  height: 100%;
}

.absolute{
  position: absolute;
  width: 100%;
  top:0;
  right:0;
  height: 100%;
  min-height: 100%;
  background-color: blue;
}

Answer 1

改变这个

html, body{
  margin: 0px;
  height: 100%;
}

.absolute{
  position: absolute;
  width: 100%;
  top:0;
  right:0;
  height: 100%;
  min-height: 100%;
  background-color: blue;
}

到

 html, body{
  margin: 0px;
  height: 100%;
}

.absolute{
  position: absolute;
  width: 100%;
  top:0;
  right:0;
  **height:auto;**
  min-height: 100%;
  background-color: blue;
}

重要的是height:auto;