Easy Div and Linear Gradient 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. Can someone help me understand what I'm missing here?

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

Set the html 's width and height to 100% as well.

 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.

 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 and Linear Gradient CSS

Question

2 answers

solution1
1 ACCPTED 2014-12-29 00:12:19

solution2
-1 2014-12-29 01:37:10

Easy Div and Linear Gradient CSS

Question

2 answers

solution1 1 ACCPTED 2014-12-29 00:12:19

solution2 -1 2014-12-29 01:37:10

solution1
1 ACCPTED 2014-12-29 00:12:19

solution2
-1 2014-12-29 01:37:10