简单的 Div 和线性渐变 CSS答案

【问题标题】：Easy Div and Linear Gradient CSS简单的 Div 和线性渐变 CSS
【发布时间】：2014-12-29 00:08:10
【问题描述】：

发生了奇怪的事情，当我将 div 的高度和宽度设置为 100%（代码段 #1）时，如果您将 div 尺寸更改为 200 像素的高度（代码段 #2）并且没有宽度，div显示渐变没问题。有人可以帮助我了解我在这里缺少什么吗？

片段#1：

    <style>
        body {
            height: 100%;
            width: 100%;
        }

        body {
            background-color: black;
        }

        #grad1 {
            height: 100%;
            width: 100%;
            background: linear-gradient(red, blue);}
    </style>
</head>

<body>

<div id="grad1">
</div>  
</body>

片段#2：

    <style>
        body {
            height: 100%;
            width: 100%;
        }

        body {
            background-color: black;
        }

        #grad1 {
            height: 100%;
            width: 100%;
            background: linear-gradient(red, blue); }
    </style>
</head>

<body>

<div id="grad1">
</div>

</body>

【问题讨论】：

标签： html css gradient linear-gradients

【解决方案1】：

将html 的width 和height 也设置为100%。

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
}
body {
  background-color: black;
}
#grad1 {
  height: 100%;
  width: 100%;
  background: linear-gradient(red, blue);
}

&lt;div id="grad1"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

您可以在 grid1 类中添加绝对位置。

body {
            height: 100%;
            width: 100%;
            background-color: black;
        }

        #grad1 {
            height: 100%;
            width: 100%;
            background: linear-gradient(red, blue);
            position:absolute;
}

&lt;div id="grad1"&gt;&lt;/div&gt;

【讨论】：