neolicd neolicd - 4 months ago 14
CSS Question

what does width: 50% mean when the container is body?



body {
background-color: skyblue;
}
div {
width: 50%;
height: 50%;
background-color: yellow;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
<div>
</div>
</body>

</html>





I've learned that width in percentage means the ratio compared with the container. However, when I assigned 50% to the width and height of div, I couldn't see the div. Could you please tell me why, and what the percentage here means?

Answer

You have to set the height fixed to work in this case, Check here

body {
  background-color: skyblue;
}
div {
  width: 50%;
  height: 100px;
  background-color: yellow;
}
<div>
 </div>