Easy Div和线性渐变CSS

Question

Strange thing happening, when I set the height and width to 100% for the div (Snippet #1,) the div disappears yet if you were to change the div dimensions to a height of 200px (Snippet #2) and no width, the div shows up with the gradient no problem. 发生了奇怪的事情，当我将div的高度和宽度设置为100％（代码段1）时，如果将div尺寸更改为200px（代码段2）的高度且没有宽度，则div消失了， div出现渐变没有问题。 Can someone help me understand what I'm missing here? 有人可以帮助我了解我在这里缺少什么吗？

Snippet #1: 片段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>

Snippet #2: 片段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>

Answer 1

Set the html 's width and height to 100% as well. 还将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); }

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

Answer 2

you can add position absolute in class grid1. 您可以在类grid1中添加绝对位置。

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

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

Easy Div和线性渐变CSS

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-12-29 00:12:19

解决方案2
-1 2014-12-29 01:37:10

Easy Div和线性渐变CSS

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-12-29 00:12:19

解决方案2 -1 2014-12-29 01:37:10

解决方案1
1 已采纳 2014-12-29 00:12:19

解决方案2
-1 2014-12-29 01:37:10