CODEWITHSUNDEEP
cssaspect-ratiosizing
HankSmackHood
HankSmackHood

Reputation: 4873

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

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.

Upvotes: 150

Views: 212546

Answers (4)

Zach Saucier
Zach Saucier

Reputation: 25954

Edit

The proper way to do this in modern (2024+) CSS is to use container query units. Simply use an inline size container query unit for both the width and height.

.container {
  container-type: inline-size;
  border: 1px solid red;
}
p {
  /* This makes the element square */
  height: 100cqw;
}
<div class="container">
    <p>This is some content that should wrap... This is some content that should wrap... This is some content that should wrap... This is some content that should wrap... This is some content that should wrap...</p>
</div>

For more about container query units, I wrote an article on the subject.

Original

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.

Upvotes: 11

Hubro
Hubro

Reputation: 59333

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>

Upvotes: 37

Fadi
Fadi

Reputation: 1760

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

Upvotes: 154

implum
implum

Reputation: 231

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

Upvotes: 15

Related Questions