CSS for the remaining viewport width based on viewport height

Question

This is for tablet browsers, it uses dimensions relative to viewport width/height. Assume a Landscape orientation for simplicity.

I have two divs in a fullscreen container, like the image provided. They have position:absolute;

The red one, I want it to always be an square, the biggest to fit the screen, so I use height 100% and width "100vh", that is, 100% of viewport height.
The green one: I'd like it to cover the remaining width.

I want to know if it's possible in pure CSS to express the remaining width for the green div. You can use top,left,bottom,right,width,height,::before,::after but the div has to be absolutely positioned (no float, etc..)

.red {
  height: 100%;
  width: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}
.green {
  height: 100%;
  width: /* ???? */;
  position: absolute;
  top: 0;
  right: 0;
}

Josh Crozier Josh Crozier · Accepted Answer · 2016-01-02T21:01:21

The green one: I'd like it to cover the remaining width.

You could use calc() to subtract the height from the width in order to get the remaining width:

width: calc(100vw - 100vh);

Working Example:

.red {
  height: 100vh;
  width: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: #f00;
}

.green {
  height: 100vh;
  width: calc(100vw - 100vh);
  position: absolute;
  top: 0;
  right: 0;
  background: green;
}

<div class="red"></div>
<div class="green"></div>

CSS for the remaining viewport width based on viewport height

1 Answers