Why is the box not displaying?

Here’s my pen https://codepen.io/navdeepio/pen/XwJLBe

If I change the width/height values to absolute units, the box’s there…

20% of what? The container for your elements has no height or width, it just expands to whatever the size of the content is, so you’re saying 20% of nothing. The container they live in is <body>, so

body {
  width: 100vw;
  height: 100vh;

You also have no content in the box, so it just collapses to nothing.

Now you have height and width, the box should appear because it’s now 20% of the above. This is going to mean that the height is fixed at viewport height, so won’t really work very well (if you add content that goes over that, then it will be hidden).

Height is normally an issue (width is easy - you just fix the width to 100%, you don’t generally want tit to go beyond that), because of the way web pages work, you scroll down, and height is jnormally just what the height of the content is. So you’d generally want to fix the height of the box to some specific value.

so body doesn’t have a height / width by default?

Sorry, yes it has a width by default (so you can miss that out), but no height – why would it have a height?

1 Like