带有颜色扭曲的身体背景图像答案

【问题标题】：body background-image with color twist带有颜色扭曲的身体背景图像
【发布时间】：2013-07-26 13:07:19
【问题描述】：

大家好，我创建了一个模板，它的背景有四分之一渐变，其余的都是这样的颜色

例子

     .left{

          width:30%;
          background-image: linear-gradient(to bottom, #f7fdff, #f6fdff);
          background-repeat:repeat-y;
            }
      .right{
           width:70%;
           background-color:#fff; 
            }

html 是

      <body>
       <div class="left"></div>            
       <div class="right"></div>
      </body>

它看起来像

我需要它在全尺寸屏幕上。如果我做了一个固定的宽度意味着它会改变取决于屏幕尺寸在这种情况下做什么修复？双方都需要 100% 的高度。背景作为双层左侧渐变和右侧颜色，就像图像一样，我需要它作为 100% 的宽度和高度。我知道它不会通过使用 div 出现。

【问题讨论】：

你的顶栏是固定高度的吗？
@Passerby 不，它的默认顶栏没有定位为固定。
如果你希望你的 div 是窗口的高度，你需要body 至少和窗口一样高。否则 div 无法计算出最高的值。但是宽度的“情况”是什么？我不确定你想要实现什么。
那你可能需要用到flex-box：developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes caniuse.com/#feat=flexbox
嗯...对不起，我根本看不懂。

标签： css

【解决方案1】：

对于left 类，添加float:left 和height:100%。对于right 类添加float:right。您可以根据自己的需要设置height为秒。

【讨论】：

您可以将两边设置为 100%。然后第二个 div 将占据父容器的整个高度。如果你想要和图片中指定的一样的效果，那么你必须根据父容器的高度来降低第二个div的高度。