149

Let's say I've got a div that has a width of 50% of the body. How do I make its height equal to that value? So that when the browser window is 1000px wide, the div's height and width are both 500px.

6
  • it can't be done in straight css. the js solution is simple though.
    – Ben Lee
    Commented Apr 8, 2012 at 12:40
  • 8
    It can actually be done with CSS alone. See Fadi's answer.
    – Adam Waite
    Commented Feb 11, 2013 at 22:58
  • Another approach, which also works for setting the width in terms of the height (unlike the padding approach), can be found here Commented Jul 11, 2015 at 1:11
  • This is not a duplicate of the linked question. This question specifically asks about basing the square on height, not width - a much different problem. Commented Dec 1, 2016 at 20:59
  • Pure JS approach: el=document.getElementById('id_div') el.style.height=el.offsetWidth+"px" This will give u a perfect square. Make your JS file execute this code when page loads -- window.onload
    – Aseem
    Commented Apr 26, 2019 at 22:11

4 Answers 4

154

This can actually be done with only CSS, but the content inside the div must be absolutely positioned. The key is to use padding as a percentage and the box-sizing: border-box CSS attribute:

div {
  border: 1px solid red;
  width: 40%;
  padding: 40%;
  box-sizing: border-box;
  position: relative;
}
p {
  position: absolute;
  top: 0;
  left: 0;
}
<div>
  <p>Some unnecessary content.</p>
</div>

Adjust percentages to your liking. Here is a JSFiddle

15
  • 5
    I understand that width: 40% is 40% of the parent element, but what is the padding: 40% in relation to?
    – Ryan
    Commented Mar 5, 2013 at 16:49
  • 2
    The padding is what gives the box equal width and height. It 'inflates' the inside of the box with padding.
    – Fadi
    Commented Apr 25, 2013 at 23:44
  • 3
    Firefox seems to have an issue on that method, but it's simple to fix. If you want a 50% box, you need "padding: 25%;". 25% on each side.
    – jurihandl
    Commented Aug 15, 2013 at 7:39
  • 101
    I hate how you can do 3D transforms, shadows, rounded corners, etc easily in CSS, but to have a square div requires a hack...
    – Jonathan.
    Commented Sep 29, 2014 at 17:45
  • 3
    @Ryan the padding: 40% is in relation to the width of the element (including padding-top and padding-bottom). Definitely surprised me, there's a good explanation on another question. Commented Jul 7, 2015 at 18:54
37

This can be done with a CSS hack (see the other answers), but it can also be done very easily with JavaScript.

Set the div's width to (for example) 50%, use JavaScript to check its width, and then set the height accordingly. Here's a code example using jQuery:

$(function() {
    var div = $('#dynamicheight');
    var width = div.width();
    
    div.css('height', width);
});
#dynamicheight
{
    width: 50%;
    
    /* Just for looks: */
    background-color: cornflowerblue;
    margin: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="dynamicheight"></div>

If you want the box to scale with the browser window on resize, move the code to a function and call it on the window resize event. Here's a demonstration of that too (view example full screen and resize browser window):

$(window).ready(updateHeight);
$(window).resize(updateHeight);

function updateHeight()
{
    var div = $('#dynamicheight');
    var width = div.width();
    
    div.css('height', width);
}
#dynamicheight
{
    width: 50%;
    
    /* Just for looks: */
    background-color: cornflowerblue;
    margin: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="dynamicheight"></div>

6
  • 31
    You don't need javascript for that. You can do as mentioned below: height: 0px; width: 40%; padding-top: 40%; Commented Feb 25, 2014 at 8:50
  • As mentioned above using JavaScript is totally unnecessary and presents problems such as FOUC or worse, disabled JS (nothing will happen). Go with the CSS method.
    – Bill
    Commented Nov 5, 2014 at 14:35
  • 1
    @Billy: "totally unnecessary"? You're forgetting that the CSS method below has some tight restrictions. The Javascript method will work in all scenarios where Javascript is enabled.
    – Hubro
    Commented Nov 5, 2014 at 14:40
  • @Hubro "tight restrictions"?
    – Bill
    Commented Nov 5, 2014 at 15:00
  • @Billy: At first glance, the div appears to need a set width and absolutely positioned content. Also, taking a look at the comments, the results appear to vary between browsers
    – Hubro
    Commented Nov 5, 2014 at 15:06
15
<div><p>some unnecessary content</p></div>

div{
    border: 1px solid red;
    width: 40%;
    padding: 40%;
    box-sizing: border-box;
    position: relative;
}
p{
    position: absolute;
    top: 0;
    left: 0;
}

For this to work i think you need to define the padding to ex. top? like this:

<div><p>some unnecessary content</p></div>

div{
    border: 1px solid red;
    width: 40%;
    padding-top: 40%;
    box-sizing: border-box;
    position: relative;
}
p{
    position: absolute;
    top: 0;
    left: 0;
}

anyways, thats how i got it to work, since with just padding all arround it would not be a square.

1
  • Thank you ! The above answer did render a square but it was not 40% width of its parent.
    – TrtG
    Commented Nov 4, 2015 at 11:08
10

I made a CSS approach to this that is sized by the viewport width, but maxes out at 100% of the viewport height. It doesn't require box-sizing:border-box. If a pseudo element cannot be used, the pseudo-code's CSS can be applied to a child. Demo

.container {
  position: relative;
  max-width:100vh;
  max-height:100%;
  margin:0 auto;
  overflow: hidden;
}
.container:before {
  content: "";
  display: block;
  margin-top: 100%;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
}

Support table for viewport units

I wrote about this approach and others in a CSS-Tricks article on scaling responsive animations that you should check out.

Not the answer you're looking for? Browse other questions tagged or ask your own question.