CODEWITHSUNDEEP
css
php_nub_qq
php_nub_qq

Reputation: 16015

Width equal to height

I have a container and children elements. The container is positioned fixed with 10% height. Each child element must have 100% height and width equal to its height - this gets even more complicated when I add that my container is expanding horizontally not vertically. I would like to ask if this is possible using CSS because with JavaScript it could be easily achieved but I'd have to listen for window resizes which is a pain and I would like to avoid that.

.container {
  width: 200px;
  height: 10%;
  border: solid 1px black;
  position: fixed;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: auto;
}

.container > div {
  display: inline-block;
  height: 100%;
  width: 50px;
  border-radius: 50%;
  border: solid 1px black;
}

https://jsfiddle.net/fdtajx3k/1/

Upvotes: 2

Views: 5340

Answers (1)

Marc Audet
Marc Audet

Reputation: 46785

The following might do the trick for you.

On your child div elements, use viewport units vh for both the width and height values.

Also, add some bottom padding (optional) on your parent container if the scroll bar is an issue.

Reference: https://www.w3.org/TR/css3-values/#viewport-relative-lengths

html,
body {
  height: 100%;
}

.container {
  width: 200px;
  height: 10%;
  border: solid 1px black;
  position: fixed;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: auto;
  padding-bottom: 30px;
}

.container > div {
  display: inline-block;
  height: 10vh;
  width: 10vh;
  border-radius: 50%;
  border: solid 1px black;
  box-sizing: border-box;
}
<div class=container>

  <div>

  </div>
  <div>

  </div>
  <div>

  </div>
  <div>

  </div>
  <div>

  </div>

</div>

Upvotes: 2

Related Questions