代码之家  ›  专栏  ›  技术社区  ›  Fred B.

HTML/BODY高度不会调整为具有粘性页脚和不透明度层的内容

  •  0
  • Fred B.  · 技术社区  · 13 年前

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

    我尝试了大量的方法,例如 border-box , display:block ,以及我在过去三天里找到的所有其他人试图弄清楚这一点。

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

    简短版本:
    我希望白色不透明度层从上到下填充,无论内容的大小。

    1 回复  |  直到 13 年前
        1
  •  0
  •   tiagojpdias    13 年前

    在HTML中添加一个div和一个类(例如:mask)

    <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 还有。