HTML / BODY 高度不会调整到带有粘性页脚和不透明层的内容答案

【问题标题】：HTML / BODY heigh won't adjust to content with sticky footer and opacity layerHTML / BODY 高度不会调整到带有粘性页脚和不透明层的内容
【发布时间】：2013-03-29 20:50:26
【问题描述】：

我希望不透明层填充到与内容量无关的底部。所以内容很少；一直延伸到底部，内容丰富；延伸到底部。

我尝试了很多方法，例如border-box、display:block，以及我在过去三天中发现的所有其他方法，试图弄清楚这一点。

我还尝试将内容设置为min-height:800px，这样即使内容很少，它也会始终显示为已填充，但是当内容超过这些 800 像素时会出现同样的问题。 http://jsfiddle.net/rZkSx/或有问题的原站：http://www.fredberentsen.com/fotosafari/index.html

简短版：
无论内容大小，我都希望白色不透明层从上到下填充。

【问题讨论】：

标签： html opacity

【解决方案1】：

在 HTML 中添加一个带有类的 div（例如：掩码）

<div class="mask></div>

并在 CSS 中将规则添加到该类

.mask {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(255, 255, 255);
    /* RGBa with 0.6 opacity */
    background: rgba(255, 255, 255, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

我也更新了你的Fiddle。

【讨论】：

工作就像一个魅力！非常感谢您如此尽我所能！
我的荣幸 :) PS：不要忘记将答案设置为“正确”。