带位置的 CSS3 布局：绝对下推内容答案

【问题标题】：CSS3 layout with position: absolute pushing down content带位置的 CSS3 布局：绝对下推内容
【发布时间】：2014-08-18 10:50:25
【问题描述】：

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

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

问题是内容（黄色）需要下推蓝色 div，具体取决于黄色 div 内有多少内容，但黄色 div 需要position: absolute 才能显示在它所在的位置。

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

Here is my fiddle.

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

【问题讨论】：

Go'dag Morten，在 oprette en jsfiddle 的 være så venlig。请设置一个 jsfiddle，以便我们可以看到您的代码。塔克。
是红色和蓝色的div只是为了放在后台吗？如果是这样，为什么不在正文上使用 CSS 背景？
@JezD：给你：jsfiddle.net/Lhj65aam/1
@misterManSam：几乎是对的。蓝色 div 的高度需要灵活，因为黄色 div 内的内容可以改变高度。我不确定将它用作 css-backgrounds 会如何改变问题？
取决于您想要实现的目标，但这就是 CSS 背景的用途！类似this example

标签： html css

【解决方案1】：

使用纯 CSS 是可行的，但你需要改变它的 CSS 方式。红色和蓝色 div 必须是 position: absolute;，因为它们的高度不会改变，黄色 div 应该有 position: relative;，因为这样 div 将设置文档的高度。

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

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

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

【讨论】：

谢谢！蓝色 div 将改变这就是问题所在。唯一的“固定”高度是红色 div，但是当屏幕变小时它会缩小，我无法在上面设置固定高度。我已经更新了一个 JSFiddle 链接。
抱歉无法更新。这是链接：jsfiddle.net/Lhj65aam/1
哇，它接近了。但是，我无法使徽标更宽，因为它似乎将内容设置为封面的大小。如果我把它放在#camlrel 之外，它就会搞砸。
我已对其进行了更新，并为徽标使用了相对宽度。现在是包含 div 的 50%。这是你要找的吗？
是的！谢谢它就像我希望的那样工作。

【解决方案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;   
}

【讨论】：