Css make div square

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.

8 Answers 8

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

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.

@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.

@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

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]

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

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

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.

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

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

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!

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.

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

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:

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

Источник

A width-responsive perfect square in pure CSS

The resize property — I wasn’t aware you could actually control this past textareas, but stumbled upon it when looking for a way to make a user-resizable div without using JavaScript.

How the square is made

#square  width: 100%; padding-bottom: 100%; position: relative; background-color: #2980b9; > 

• width: 100% is to make sure it’s defined as having the same width as its outer, resizable container.
• padding-bottom: 100% is based on a trick in the CSS spec. When specifying a margin or padding by percentage, it’s always based on the width, even if it’s a -top or -bottom property. In this way we get a property that’s equal to the width.
• position: relative is so that I can put stuff inside it without disrupting the padding; any additional content would add content to the box, which would make it a rectangle
• background-color is there so you can see where it is ¯\_(ツ)_/¯

How the circle is made

Once you have any square, making a circle is easy enough. The only trick you really need is border-radius: 50% , but let’s break down the responsive circle a bit more.

#circle  position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; border-width: 4px; border-color: #27ae60; border-style: solid; border-radius: 50%; > 

• position: absolute makes sure that this circle stays within the position: relative square while not adding any in-flow content to it.
• top: 0; bottom: 0; width: 100%; height: 100%; constrains the circle to the exact dimensions of the responsive square. At this point, what we have is a position: absolute container that is an inner copy of our square.
• The border-* properties are used to build the outline of the circle. We have a 4px green solid border, and it has a radius of half the edge of the square.

Quick geometry recap

Here’s an illustration of why 50% is the magic number to make a circle from a square:

The radius of the circle is equal to half the side of the square.

Источник

How to Create a Responsive Square with CSS

During a recent project I came upon an interesting CSS problem. I needed to create a square element that would maintain its square shape as it responsively resized to a changing window size.

The Problem

It is easy to create a square when we can explicitly declare its ‘width’ and ‘height’ :

However, when we try to make our square element responsive by changing our units to percentages, we run into a problem:

The element’s width is calculated as a percentage of its parent’s width, while its height is calculated as a percentage of its parent’s height. Because our width and height are calculated from different measurements, the square will no longer hold its shape.

The Solution

After quite a bit of searching, I came upon a surprising solution to the problem. By making use of the :after pseudo-element and ‘padding-bottom’ , we can create our responsive square using only CSS.

The solution relies on the somewhat counterintuitive fact that padding is calculated as a percentage of its parent element’s width, not height. This rule applies, even for ‘padding-top’ and ‘padding-bottom’ , despite being vertical measurements.

To capitalize on this fact, we must first remove the ‘height’ property from our .square element. In its place, we add an empty :after element to .square and set ‘padding-bottom: 100%’ :

Because the pseudo element’s padding is calculated as a percentage of its parent’s width, and its parent is our .square element, we are effectively fixing the height of the pseudo-element to the width of .square . Whenever .square ’s width changes, so will the pseudo-element’s height.

Adding Content

Finally, we might like to add some content to our .square element. The above solution relies on both .square and .square:after having a height of 0, so adding content to either of them would break our solution.

Fortunately, this problem is easily solved by creating an absolutely positioned element and placing it within .square . The new element can be sized to match the square, but since it is absolutely positioned, its content will not affect the dimensions of our square:

.square < position: relative; width: 50%; >.square:after < content: ""; display: block; padding-bottom: 100%; >.content

Источник

Pure CSS Solution — Square Elements? [duplicate]

do you mean dynamically, meaning if the width increased then the height would match it automatically?

that sounds like you want to use logic in css, which to my knowledge is not possible at this time. remember, css’s job is not to handle logic (at lease not of this caliber) but merely layouts and display. stuff like this (mathematic calculations) is exactly what javascript is meant to do.

JavaScript is more a means of dynamic interaction, not a crutch to achieve a certain layout. This logic is really quite simple compared to current CSS capabilities. I’m surprised that there aren’t methods to size an element using an aspect ratio.

It’s not a crutch when the current tools can’t do what you need them to do. You being surprised doesn’t change the fact that it can’t be done in CSS alone at this time.

6 Answers 6

It is actually possible to achieve it with this neat trick i found at this blog

This would work, and indeed it does answer my original question. However, my requirements have slightly changed, and I need to be able to size the element by having a certain percentage for the height, and then set the width accordingly to make the element square. This solution doesn’t quite seem to work for that. Though, perhaps a kluge would be to use transform: rotate(90deg); for the element, and transform: rotate(270deg); for the content within.

No, and Yes (Kinda)

Okay, so the short answer is «no,» not possible. The long answer is, «yes,» given certain constraints and concessions (i.e. extra html markup, and limitations on what can be done).

.square < position: relative; margin: 20px; display: inline-block; /* could be float */ overflow: auto; /* UPDATE: if content may overflow square */ >.sq-setter-w < width: 100%; height: auto; visibility: hidden; >.sq-setter-h < width: auto; height: 100%; visibility: hidden; >.sq-content

 
  
Here is content
 
 
  
Here is content
 
 
 
  
Here is content
 
 
 
 
  
Here is content
 
 
 

You can get it to do what this fiddle shows.

1. The image used needs to be a square image, as it is driving the proportional sizing (the img element is the only element that can do such proportional work, as it can base its size off the proportion of the image itself).
2. You have to know if you are going to set the width or the height so that you can set the image class correctly to size it. Optionally, set the width or height on the img itself, then you don’t need to worry about setting a class to the 100% value. My demo was assuming that you set the size on the wrapper div (my .square class).
3. To get the div to collapse around the img which is driving the proportional sizing you need to set display: inline-block or a float on the div (as noted in the css above).
4. Because of #3, if you want that div to act more «block-like» you need to give them an extra wrapper div like the third and fourth ones show.

Obviously, there is a lot of extra mark-up involved in this solution. So in many ways it is better to say «just use javascript,» but I did want to prove that it could be done (at least in some cases) purely with HTML and CSS.

Update: To Show Flexible Sizing Possibility

 
  
Here is content
 
 

Источник