CSS中的液体背景答案

【问题标题】：Liquid backgrounds in cssCSS中的液体背景
【发布时间】：2014-01-21 15:57:03
【问题描述】：

我有一个有两行背景的页面。一条线是黄色的，高度：65%，另一条线是灰色的，高度：35% 我在中心有一个绝对定位的 div，宽度和高度固定。灰线就在我的 div 下方。问题是，当我更改页面大小或缩小（模拟大尺寸屏幕）时，我的 div 出现在灰色背景之上。如果我将每条背景线的高度设置为 50%，一切都很好，但我需要 65% 和 35%。这是 jsfiddle 链接：http://jsfiddle.net/J2LTR/ 尝试缩小页面，黑色方块将超出灰色背景。任何想法如何解决这个问题？

这是我的代码：

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    min-height: 100%
}
    .yellow {
    width: 100%;
    height: 65%;
    background: #e5bd00;
    background-repeat: repeat;
    }
    .gray {
    width: 100%;
    height: 35%;
    background: #d2d2d2;
    background-repeat: repeat;
    }
    .wrap {
    min-width: 300px;
    width: 100%;
    height: 100%;
    min-height: 600px;
    margin: 0 auto;
    position: relative; 
    }
    .center_box {
    background: #000;   
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -120px;
    margin-left: -200px;
    width: 400px;
    height: 235px;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="yellow"></div>
        <div class="gray"></div>
        <div class="center_box">some content</div>
    </div>
</body>
</html>

【问题讨论】：

标签： html css background liquid-layout

【解决方案1】：

您的 top 和 margin-top 值不正确，因为它是基于中心的，并且您的边界值下降了 65%。试试这个：

.center_box {
    background: #000;   
    position: absolute;
    top: 65%;/* the tune you need to start with */
    left: 50%;
    margin-top: -235px;
    margin-left: -200px;
    width: 400px;
    height: 235px;
    }

http://jsfiddle.net/J2LTR/1/

如果你只想包含年轻的浏览器，你甚至可以在 body 上使用线性渐变：http://codepen.io/anon/pen/EImiz

【讨论】：

感谢您的回复。但我需要我的灰色背景稍微低于我的 div。在您的示例中， div 的底部与灰色背景的顶部相同。
增加或减少 margin-top 的值以根据您的需要进行调整:) -236px 将在框下方给出一条 1 px 的灰线 .. -237 2px 等等
好吧，我的源代码有渐变 :) 这只是一个简单的例子。
感谢您的回答。这个想法是我必须具有与我的顶部背景层值相同的顶部值。它有帮助！