CODEWITHSUNDEEP
htmlcsswidthcss-positionpercentage
neolicd
neolicd

Reputation: 1089

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?

Upvotes: 2

Views: 4409

Answers (4)

Hitesh Misro
Hitesh Misro

Reputation: 3461

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>

Upvotes: 0

Tuhin
Tuhin

Reputation: 3373

body {
  background-color: skyblue;
  height : 100px;
}
div {
  width: 50%;
  height: 50%;
  background-color: yellow;
  position:absolute;
}
<!DOCTYPE html>
<html>

<head>
</head>

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

</html>

Upvotes: 0

Gianluca Mancini
Gianluca Mancini

Reputation: 1312

The percentage is calculated from the parent element, so if you set height you also have to set to the parent.

Upvotes: 1

kukkuz
kukkuz

Reputation: 42352

Add position: absolute to the div and that's it!

Please learn about how the position works on DOM elements.

body {
  background-color: skyblue;
}
div {
  width: 50%;
  height: 50%;
  background-color: yellow;
  position: absolute;
}
<!DOCTYPE html>
<html>

<head>
</head>

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

</html>

Upvotes: 1

Related Questions