css - 使用 z-index 的分层 div 的位置和高度问题

Question

我需要一些帮助来完善我正在处理的布局。

这里是网站当前状态的链接: http://sometimesyoubreakaclarinet.com/

您会看到灰色内容区域后面有一个很大的粉红色区域，它大约位于页面下方的三分之一处。出于某种原因，当我真正希望它与内容的高度相匹配时，它只会形成浏览器高度/宽度的 100%。我如何获得向下填充的高度以适合内容，就像灰色内容区域已经在做的一样？

其次，我希望这个粉红色区域从顶部背景横幅图像的末尾开始，而不是现在的位置。我如何实现这一目标？我需要改变相对于其他东西的位置吗？

这里的目标是让粉色区域覆盖横幅图像和标题；类似于此处概述的内容: http://line25.com/tutorials/how-to-create-a-simple-collapsing-header-effect

我在下面包含了我认为是相关的 CSS 代码，可能我遗漏了一些重要的东西，但如果需要，您应该能够在上面的链接中找到 CSS 文件。

#menu           { width: 100%; height: 32px; margin: auto; padding: 6px auto 0; top:0px; z-index: 10;
                  position: fixed; text-decoration: none; background: rgba(44,44,44,0.95); }
#photograph     { width: 100%; margin: 0 auto; background: #8a2dc7 url('img/header-2014-apr-1200.jpg') fixed center top no-repeat;
                  background-position: center top; background-size: 100%; min-height: 250px; height: 250px; top:0px; 
                  position: fixed; }    
#sitetitle      { width: 100%; height: auto; margin: 0 auto; padding: 25px 0 0 0; background: transparent; position: fixed; }   #deck           { width: 100%; height: 100%; min-height: 100%; margin: 0 auto; padding: 0; position: relative; 
                  background: transparent; z-index: 4; }
#card           { width: 800px; height: auto; margin: 170px auto 0; padding: 10px 18px; 
                  text-decoration: none; background: #2c2c2c; }
#curtain        { width: 100%; height: auto; min-height: 100%; margin: 220px auto 0; padding: 0; position: relative; 
                  background: #f12fde; z-index: 2; }

希望有人能帮我解决这个问题。谢谢!

Answer 1

这能解决您的问题吗？将#curtain 的 css 更改为..

#curtain {
    width: 800px;
    height: auto;
    min-height: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    background: #f12fde;
    z-index: 2;
    top: 0;
}