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;
}

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

1 个答案: