Question

我有一个响应式页面，我需要在不同的高度插入各种内容：

上半部分是带有渐变叠加（红色）的图像。
在它下面是一个具有相同颜色（蓝色）的div，所以它看起来像是这两个div之间的平滑过渡。

Example

问题是内容（黄色）需要根据黄色div内部的内容按下蓝色div，但黄色div需要显示在position: absolute的位置。

这在纯CSS中是否可行？或者我需要javascript来计算蓝色div的高度？

HTML

<div class="pr">
    <img src="http://www.cphrecmedia.dk/musikdk/stage/demobilleder/detartistchannel2.jpg">
    <div id="campaignreleases"></div>
    <img id="camlogo" src="http://www.cphrecmedia.dk/musikdk/stage/css/lyttesession.svgz" alt="MusikDK logo">
</div>
<div id="camrel">
    <img src="http://www.cphrecmedia.dk/musikdk/stage/demobilleder/detlyttealbum.jpg" alt="ALBUMNAME">
    <p>Below I need to add whatever I'll need. So basically it needs to push down the "camrel" div, but all this content also needs to be positioned just below the logo (inside the "pr" div)</p>
</div>

CSS

body {
    background: #ddd
}
.pr {
    position: relative;
    width: 800px
}
.pr img {
    width: 100%
}
#campaignreleases {
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background: -moz-linear-gradient(top, rgba(26, 188, 156, 0.2) 0%, rgba(26, 188, 156, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26, 188, 156, 0.2)), color-stop(100%, rgba(26, 188, 156, 1)));
}
#camlogo {
    position: absolute;
    -webkit-transform: translateX(-50%);
    left: 50%;
    top:15%;
    opacity: 1 !important;
    max-width: 500px
}
#camrel {
    background: #1ABC9C;
    text-align: center;
    overflow: auto;
}
#camrel img {
    width: 250px;
    .roundedcorners;
}

Answer 1

纯CSS可以实现，但你需要改变CSS的方式。红色和蓝色div需要position: absolute;，因为它们的高度不会改变，黄色div应该有position: relative;，因为那个div将设置文档的高度。

您可能会遇到背景颜色问题。但这可以通过赋予身体与蓝色div相同的背景颜色来解决。

如果不清楚，或者您仍然不知道该怎么做，请告诉我。我很乐意提供帮助。

编辑：我已经使用你的fiddle创建了一个，以创建我上面解释的内容。

Answer 2

这是我对你的设计的一个背景伪元素结合一些z-index来获得一个简单的布局。 .content:after position:fixed保持附加到视口以保持一致的渐变。

Have an example!

HTML

<div class="wrap">
    <div class="header">
        <img id="camlogo" src="image-source" alt="MusikDK logo">
    </div>

    <div class="content">
        <!-- fill me up! -->
    </div>
</div>

CSS

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: #ddd;
}
.wrap {
    width: 800px;
    margin: 0 auto;
}
.header {
        background: url(http://www.cphrecmedia.dk/musikdk/stage/demobilleder/detartistchannel2.jpg) center 0 no-repeat;
    height: 600px;
    background-size: 800px;
    z-index: -3;
    position: relative;
}
.content:after {
    content: '';
    height: 100%;
    display: block;
    background: -moz-linear-gradient(top, rgba(26,188,156,0.2) 0%, rgba(26,188,156,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(26,188,156,0.2)), color-stop(100%,rgba(26,188,156,1)));
    position: fixed;
    bottom: 0;
    z-index: -2;
    left: 50%;
    width: 800px;
    margin-left: -400px;
}
#camlogo{
    position: absolute;
    -webkit-transform: translateX(-50%);
    left: 50%;
    top:10%;
    opacity: 1 !important;
    max-width: 500px
}
.content {
    margin-top: -400px;
    padding: 0 200px;   
}

带位置的CSS3布局：绝对压低内容

2 个答案: