html - HTML / BODY 高度不会适应带有粘性页脚和不透明层的内容

Question

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

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

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

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

Answer 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)";
}

我也更新了你的小提琴。