html - 当顶部的高度为 100% 时，如何让两个 div 共享一个背景？

Question

我有一个相当技术性的设计。首先，应该有一个 100% 高度(有一些最小值和最大值)的“横幅”，并且最好设置一个背景图像来覆盖它。然后，在下面的 View 之外，应该有一个固定高度的 div 共享相同的背景，除了稍微变暗。

我拼凑了一个模型，所以概念很清楚:

.

问题可以用 this jsfiddle 来说明，我尝试在另一个包含背景的 div 中制作覆盖屏幕的 div。这是行不通的，因为 height: 100% 要求所有父项都具有相同的设置，但是如果我将背景设为 100% 的 div，那么底部的 div 会再次出现...

正如我所想，将顶部 div 设置为 height: 110% 或类似的值，然后在其中工作不会产生我想要的结果。如果我可以将它设置为 100% + 200px 那就太好了，但是，唉，我不知道怎么做，也不知道有什么好的解决方法。

任何有解决方案或好的想法的人，请把它们扔给我!

Answer 1

使用calc计算背景的高度。

.background {
    background: blue;
    position: relative;
    height: calc(100% + 100px);
}

body, html {
    height: 100%;
}

.max-height {

}

.bottom-div {
    position: absolute; 
bottom: 0;
    background:rgba(255,255,255,0.5);
    width: 100%;
    height: 100px;
}

http://jsfiddle.net/skeurentjes/jx7xLrpx/2/

不要忘记检查浏览器支持: http://caniuse.com/#feat=calc