Square DIV where height is equal to viewport

Question

I need to create a DIV where width=height, and height=100% of the viewport (which, obviously, is variable).

In other words, a perfectly square DIV that calculates it's dimensions based on the height of the viewport. Elements within that DIV will take their dimensions as percentages of the parent-DIV's height & width.

It seems to me like this should be simple to do in CSS, but I've gotten stuck with it! Any pointers would be much appreciated.

Inductee

I think it's not possible using CSS. There are no methods like width: height;. – Venetic

@atlavis is right, you'll need some javascript. – Shaikh

Answer 1

You can do this with jquery (or pure javascript if you prefer).

With jquery:

<div id="square">
</div>

$(document).ready(function(){
  var height = $(window).height();
  $('#square').css('height', height);
  $('#square').css('width', height);
});

Shaikh

Oops, hit enter too soon. For anyone else wanting to know, you can also make width a value calculated from height, for instance (height*1.2)- excellent! Now to figure out how to have this degrade gracefully when people don't have javascript enabled! – Inductee

Answer 2

There is a neat trick using pure css that i stumbled upon:

#square {
width: 100%;
height: 0;
padding-bottom: 100%;
}

http://blog.brianjohnsondesign.com/2013/maintain-aspect-ratio-for-html-element-using-only-css-in-a-responsive-design/

Bo

Feels super kludgy, BUT seems to be working 100% (ha ha) so far. +1 – Gorlovka

This is useful but does not do what the original question asks for. This will not maximize the height of the element to fill the viewport. – Katelyn

@MKYung This cannot be the accepted answer as it does not answer the question. This answer sets height=width when it was explicitly asked the opposite to set width=height. – Modestomodesty

Too bad it does not work if one wishes to mix it with Bootstrap. – Algebraic

@Werd this isn't the correct answer to the question. The width isn't calculated according to the height as the question asks. If you want ways to keep aspect ratio according to the width of the element please see How to maintain the aspect ratio of a div using only CSS – Angers

Answer 3

CSS only solution : vh units

To make the element resize according to the height of the viewport you can use vh units :

vh : 1/100th of the height of the viewport. [source MDN]

---

Example:

body{margin:0;}

div{
    background:gold;
    height:100vh;
    width:100vh;
}

<div></div>

Fiddle DEMO

This will make the width and height of the element equal to the height of the viewport.

---

Bowser support for vh units is IE9+. More info here

Angers

This is exactly what I was looking for! It is a lot less hacky than other CSS solutions and doesn't use JavaScript. – Intravenous

This is a cool solution so +1 but it has a limitation. For portrait viewports where width is smaller than height, width: 100vh will move content out of the screen. It might looks cutting. – Passe

@MuhammadUsman for your case you can use the vmin unit. It is the smallest between width and height of viewport. – Angers

Answer 4

CSS3 has a way of doing this using vw, viewport width, and vh, viewport height. Using these measures, 100vw is the entire width of the viewport, and 100vh is the entire height. More information about relative css3 values and units here.

As of writing this, the only support however is for Internet Explorer 9, so this is probably not what you're looking for, but is something good to keep in mind when future support follows.

Extraterrestrial

And oh boy, did it ever. Now [almost] every major browser supports vw and vh. caniuse.com/#feat=mdn-api_css_vw – Zip

Answer 5

One additional trick I came up with to help partially solve this problem, for anybody who stumbles across this page... Run the following code in your page's onload event:

$('body').css('font-size',$(window).height()/100)

This means the css "em" unit is equal to 100th of your page height- You can now arbitrarily use this in your css file to size any item relative to your viewport height. This is more generic than the other solutions listed here- And most likely you want to size all of the elements of your page to take into account your viewport height. For instance, if you now want to create your square you can just write:

#square{width:100em;height:100em}

Of course, you'll also have to take this into account for any text on your page (since this trick affects the font size)

Ciaphus

Answer 6

This is interesting...

For those who may be looking for a pure CSS way to contain a square div with the maximum dimensions:

The key takeaway here is that you set max-width and max-height while setting width and height to the opposite values.

HTML

<div>
</div>

CSS

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

div {
  background-color: red;
  width: 100vh;
  height: 100vw;
  max-width: 100vw;
  max-height: 100vh;
}

Live running example: https://jsfiddle.net/resistdesign/szrv5o19/

Panarabism

Answer 7

You could use Javascript and get the screen size. After which you could set width and height accordingly.

window.screen.width, and window.screen.height should work.

You could then use this information and generate a tiny bit of CSS for the page to be displayed accordingly.

Indue

Answer 8

I don't know if I'm getting this right, but if you want to set it to 100% oh the height of the viewport, you could easily do this in css:

.stuff {
  background:#DDD;
  display:inline-block;
  height: 100vh;
  width : 100vh;
}

You could check it out here

Ironstone