-1

I would like to have a HTML div with an orange background. It has no elements inside of it and I would like the width to take up 100% of the page and the height to take up 50% of the page. How can I do this? Here is the HTML code:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id=weldiv>
    </div>
</body>
</html>

and here's the CSS:

body{
    padding:0;
    margin:0;
}
#weldiv{
    width:100%;
    height:50%;
    background:orange;
    text-align:center;
}

When this is run, a blank white page shows up

Serket
  • 3,785
  • 3
  • 14
  • 45
  • 1
    A height in percent only works if the parent element has an explicit height set as well. – CBroe May 08 '20 at 12:38

1 Answers1

0

You need to put a specific height to your div element, not % because this element is empty so you couldn't apply a % height value.

e.g

#weldiv{
    width: 100%;
    height: 300px; /*Example Value*/
    background: orange;
    text-align:center;
}
<div id="weldiv"></div>
Jesper Martinez
  • 611
  • 5
  • 15