Percentage Width/Height not working properly?

Question

body
{
    font-family: "Source Sans Pro";
    background: hsl(220, 10%, 5%);
    color: #FFF;
    margin: 0;
    overflow: hidden;
}

#game
{
    width: 100vmin;
    height: 100vmin;
}

#gameWrapper
{
    justify-content: center;
}

#ball
{
    background-color: #FFF;
    position: absolute;
    height: 5%;
    width: 5%;
    border-radius: 100%;
}

<body>
    <div id="gameWrapper" style="display: none">
        <div id="game">
            <div id="padTop"></div>
            <div id="ball"></div>
            <div id="padBottom"></div>
        </div>
    </div>
</div>
</body>

In the #game div, both height and width are set to 100% of the smallest of viewport units, so percentage should be a 1:1 aspect ratio. I honestly don't know why this is happening. Someone please help me.

Remove `positon:absolute` and it will work. when you set `positon:absolute`, it become 5% of the window width, and 5% of the window height, it's not 5% of the parent width/height anymore. If you want to keep it, you can set `position:relative` on the parent (aka #game), and your element will be positionned/sized relative to the parent — Lk77, Dec 08 '22 at 16:54

score 0 · Accepted Answer · answered Dec 08 '22 at 16:59

if the idea is to have a round ball, try that:

body {
  font-family: "Source Sans Pro", monospace;
  background: hsl(220, 10%, 5%);
  color: #FFF;
  margin: 0;
  overflow: hidden;
}

#game {
  width: 100vmin;
  height: 100vmin;
}

#gameWrapper {
  justify-content: center;
}

#ball {
  background-color: #FFF;
  position: absolute;
  width: 5%;
  border-radius: 100%;
  aspect-ratio: 1/1;
}

<div id="gameWrapper">
  <div id="game">
    <div id="padTop"></div>
    <div id="ball"></div>
    <div id="padBottom"></div>
  </div>
</div>

Percentage Width/Height not working properly?

1 Answers1