Make a square with a height 100%

Question

I am trying to make a square with height 100% of the screen only in css. I know that I can do this with JS by calculating the height and applying this to width and height, but I am looking for only css solution.

I have found the following answer but it looks like it makes width 100%. When I tried to make height 100% with

.square{
    height: 100%;
    padding-right: 100%;
    background: red;
}

nothing shows up (take a look at this fiddle). Any idea what is wrong?

Is that a typo? Having `height` twice, the second being `0`? — putvande, Jun 30 '14 at 08:23
If you mean 100% of the viewport height, you can just use `100vh` for both the `width` and `height` of your div, like in this demo http://jsfiddle.net/9Nxjs/20/ — King King, Jun 30 '14 at 08:29

score 3 · Accepted Answer · answered Jun 30 '14 at 08:23

3

try this http://jsfiddle.net/webtiki/c43QG/

.square{
    height:100vh;
    width:100vh;
}

answered Jun 30 '14 at 08:23

Amit

1,841
1
19
36

2

It should be noted that not all browsers support `viewport-units`: http://caniuse.com/viewport-units – Niklas Jun 30 '14 at 08:41

score 0 · Answer 2 · answered Jun 30 '14 at 08:19

0

You set first time height to 100%, on next line to 0. Why?

you have to add height: 100% to html too

<style>
html, body{
    height: 100%;
    margin: 0;
}

.square{
    height: 100%;
    padding-right: 100%;
    background: red;
}
</style>
<div class="square"></div>

http://jsfiddle.net/9Nxjs/2/

answered Jun 30 '14 at 08:19

pavel

26,538
10
45
61

2

Why did this get two up-votes? This doesn't solve anything...or what am I missing? – Niklas Jun 30 '14 at 08:25

score -1 · Answer 3 · answered Jun 30 '14 at 08:30

-1

I hope this would do http://jsfiddle.net/r8732/

<div class="dummy_class">
  I am height : 100%
</div>

   html, body{
    height:100%;
}

.dummy_class{
    height:100%;
    background-color : red;
}

Add height:100% to your html

answered Jun 30 '14 at 08:30

Kanishka

85
2
11

and does this look like a square to you? Have you noticed that it makes all display red? – Salvador Dali Jun 30 '14 at 08:32

Make a square with a height 100%

3 Answers3