Easy Div和線性漸變CSS

Question

發生了奇怪的事情，當我將div的高度和寬度設置為100％（代碼段1）時，如果將div尺寸更改為200px（代碼段2）的高度且沒有寬度，則div消失了， 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>

Answer 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); }

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

Answer 2

您可以在類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