Can I set the height of a div based on a percentage-based width

Question

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

User · Answer

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    x000D   x000D  div   x000D    border  1px solid red  x000D    width  40   x000D    padding  40   x000D    box-sizing  border-box  x000D    position  relative  x000D    x000D  p   x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    x000D   lt div gt  x000D     lt p gt Some unnecessary content  lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    Adjust percentages to your liking  Here is a JSFiddle

User · Answer

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    x000D   x000D    function     x000D      var div       dynamicheight    x000D      var width   div width    x000D       x000D      div css  height   width   x000D      x000D   dynamicheight x000D    x000D      width  50   x000D       x000D         Just for looks     x000D      background-color  cornflowerblue  x000D      margin  25px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  dynamicheight  gt  lt  div gt  x000D   x000D   x000D    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     x000D   x000D    window  ready updateHeight   x000D    window  resize updateHeight   x000D   x000D  function updateHeight   x000D    x000D      var div       dynamicheight    x000D      var width   div width    x000D       x000D      div css  height   width   x000D    x000D   dynamicheight x000D    x000D      width  50   x000D       x000D         Just for looks     x000D      background-color  cornflowerblue  x000D      margin  25px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  dynamicheight  gt  lt  div gt  x000D   x000D   x000D

User · Answer

lt div gt  lt p gt some unnecessary content lt  p gt  lt  div gt   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    lt div gt  lt p gt some unnecessary content lt  p gt  lt  div gt   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

User · Answer

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

[css] Can I set the height of a div based on a percentage-based width?

Examples related to css