将透明 div 层放在另一个高度为 100% 的 div 层之上（带有粘性页脚！）？答案

【问题标题】：Place transparent div-layer above another div-layer with 100% height (with sticky footer!)?将透明 div 层放在另一个高度为 100% 的 div 层之上（带有粘性页脚！）？
【发布时间】：2014-05-19 08:42:01
【问题描述】：

HTML：

<div id="mainWrapper">
    <div id="headerContainer">Header</div>
        <div class="contentPage">
            <div id="content">
                      <p>Content Page</p>
                      <p>Content Page</p>
             </div>
        </div>
    <div id="footerContainer">Footer</div>
</div>

CSS：

body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#mainWrapper {
  margin: 0 auto;
  min-height: 100%;
  position: relative;
  width: 100%;
  background: red;
}

#headerContainer {
  background: none repeat scroll 0 0 #4ED0AA;
  height: auto;
  width: 100%;
}

.contentPage {
  background: url("http://www.sammt.net/Baum.jpg") repeat-y scroll 0 0 / 100% auto rgba(0, 0, 0, 0);
  padding-bottom: 120px;
  width: 100%;
}

#content {
  background: none repeat scroll 0 0 #6288A1;
  opacity: 0.8;
  padding: 20px 20%;
}

#footerContainer {
  background-color: #4ED0AA;
  bottom: 0;
  height: 120px;
  position: absolute;
  width: 100%;
}

结果：

应该发生什么：具有背景图像的图层以及具有蓝色透明背景的图层应该一直到页脚开始。问题是我认为的粘性页脚......

看起来像这样：

【问题讨论】：

您需要更精确地了解您需要的行为：1) 内容是否始终具有相同的高度？ 2）如果不是，如果内容在您想要scollbar的底部溢出，会发生什么？ 3）页脚和页眉有固定的高度吗？
1) #content 总是有不同的高度（这是主要问题）。 2）滚动条应该在浏览器窗口中，如果#content是高度。 3）#footerContainer 具有固定高度，如您在 css 中所见，标题高度未定义固定。

标签： html css layer sticky-footer

【解决方案1】：

页面的Here is a demo 仅有两段，another demo 有大量内容可供滚动。

我对布局做了一些重新排列，所以现在看起来像这样：

<div id="transparent-bg"></div>

<div id="mainWrapper">
    <div id="headerContainer">Header</div>

    <div class="contentPage">

        <div id="content">
            <p>Content Page</p>
            <p>Content Page</p>
        </div>
    </div>
</div>
<div id="footerContainer">
    Footer
</div>

基本上，背景图像和透明颜色在单独的div 中显示，因为它会导致一些显示问题，并且footer 已成为mainWrapper 之后的兄弟。

CSS代码如下：

html {
    height:100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#transparent-bg {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  background: url("http://www.sammt.net/Baum.jpg") no-repeat;
  background-size:cover;
  z-index:-1;
}

#transparent-bg:after {
  background:#6288A1;
  opacity:.8;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  content:'';
}

#mainWrapper {
  margin: 0 auto -120px;
  width: 100%;
  min-height:100%;
  height: auto !important;
}

#headerContainer {
  background: #4ED0AA;
  height: auto;
  width: 100%;
}

.contentPage {  
  width: 100%;
  margin: 0 auto -120px;
}

#content {
  padding: 20px 20% 120px;
  box-sizing: border-box;
}

#footerContainer {
  background-color: #4ED0AA;
  height: 120px;
  width: 100%;
}

希望这能解决你的问题！

【讨论】：

感谢 van100j 的熟练回答。您的代码运行良好。我的问题是，由于其他一些依赖项，我无法更改 HTML。 .contentPage 中的所有内容都是完全可适应的，不幸的是，不可能在更高级别更改 HTML :-/ 你知道如何以这种方式解决它吗？
您可以在.contentPage容器like in this demo中添加#transparent-bg div
抱歉我之前评论里的代码乱七八糟，你可以看看jsbin.com/yiqafuzo/4/edit的代码
你救了我的一天，我在这个问题上工作了很长时间。非常感谢！

【解决方案2】：

// text write your css code 

#mainWrapper {
  background: none repeat scroll 0 0 #FF0000;
  height: 1000px;
  margin: 0 auto;
  position: relative;
  width: 100%;
  }
#headerContainer {
   background: none repeat scroll 0 0 #4ED0AA;
   width: 100%;
 }
 .contentPage {
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
 }
 #content {
   background: url("http://www.sammt.net/Baum.jpg") 
   repeat-y scroll 0 0 / 100% auto rgba(0, 0,0,0);
   bottom: 0;
   left: 0;
   opacity: 0.8;
   position: absolute;
   right: 0;
  top: 0;
 }
#footerContainer {
  background-color: #4ED0AA;
  height: 120px;
  width: 100%;
 }

【讨论】：

感谢您的回答，但现在如果内容很少，您必须滚动。你不能给 mainWrapper 一个固定的高度，因为内容总是可变的。

【解决方案3】：

尝试在蓝色透明背景中添加background-size:cover。

【讨论】：

不工作。似乎背景大小仅适用于图像，不是吗？

【解决方案4】：

试试这个代码

#content {
  background: none repeat scroll 0 0 #6288A1;
  opacity: 0.8;
  padding: 20px 20%;
  height: 100%;
}

Live Demo

【讨论】：

这段代码使图层具有背景高度（但太高，您必须滚动），蓝色图层仍然只覆盖 contentPage 中的文本...
也许我误解了你的问题，并在屏幕上认为你错过了我写给你的事实，以及属性 background-size: cover;应用以铺设图像的选定部分
刚刚添加了一张应该是什么样子的图片
添加高度：100%； #容器
对不起，我的意思是#content