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.
4 Answers
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
-
5I understand that
width: 40%
is 40% of the parent element, but what is thepadding: 40%
in relation to?– RyanCommented Mar 5, 2013 at 16:49 -
2The padding is what gives the box equal width and height. It 'inflates' the inside of the box with padding.– FadiCommented Apr 25, 2013 at 23:44
-
3Firefox 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. Commented Aug 15, 2013 at 7:39
-
101I hate how you can do 3D transforms, shadows, rounded corners, etc easily in CSS, but to have a square div requires a hack... 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
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>
-
31You 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.– BillCommented 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.– HubroCommented Nov 5, 2014 at 14:40
-
-
@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– HubroCommented Nov 5, 2014 at 15:06
<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.
-
Thank you ! The above answer did render a square but it was not 40% width of its parent.– TrtGCommented Nov 4, 2015 at 11:08
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.
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