Question

发生奇怪的事情，当我将div的高度和宽度设置为100％（Snippet＃1）时，如果要将div尺寸更改为200px（Snippet＃2）的高度，div就会消失宽度，div显示渐变没问题。有人能帮我理解我在这里失踪的东西吗？

Snippet＃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：

    <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

将html＆＃39; s width和height设置为100%。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Easy Div和Linear Gradient CSS

2 个答案: