Miha Šušteršič Miha Šušteršič - 1 year ago 135
jQuery Question

jQuery - set div width equal to height

I have a div that will always fill 100% of the browser height. Now I want to set its width to the same value (including screen resizing).


<div id="mainCircle">


body, html {
height: 100%;
margin: 0;
padding: 0;

main {
height: 100%;
width: 100%;
overflow: hidden;

#mainCircle {
height: 100%;
border-radius: 50%;
background-color: gray;


$(document).ready(function() {
$(window).resize(function() {

If I pass in the value for
as a number - for example 100px this will work, but not dynamically. What am I doing wrong?

Answer Source

in jQuery height() is a function, not a property

$(document).ready(function() {

    $(window).on('resize', function() {
        $('#mainCircle').width( $('#mainCircle').height() );

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download