How to make div's width same as screen height?

Question

So. I have fixed positioned div that has 100% height from screen top to bottom and I need to match its width to be same as its height on all screen sizes. How I do it?

(Edited the title question)

div {
    position:fixed;
    top:0;
    left:0;
    height:100%;
}

Hi MrO, welcome to Stack Overflow! Please do a quick search here for related answers before posting a question. This exact question has already been asked / answered many many times! [Here's just one example](https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space?rq=1) — Benji, Mar 24 '18 at 18:59
I searched Google and Stack Overflow before question and didn't find answer. This didn't answer my question neither. I need to know how to make div's width same as it's height when height is 100%. — MrO, Mar 24 '18 at 19:07

score 0 · Accepted Answer · answered Mar 24 '18 at 20:01

Think about this differently, since the element is fixed, 100% height means 100% height of the screen so we can use vh unit instead of % like this:

.box {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vh;
  background: red;
}

<div class="box">
</div>

How to make div's width same as screen height?

1 Answers1