Square DIV where height is equal to viewport

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.

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);
});

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

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

Hope that helps.

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

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

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.

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)

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.

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

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/

来源：https://stackoverflow.com/questions/6693956/square-div-where-height-is-equal-to-viewport

标签

html