Question

我有一个div，它将始终填充浏览器高度的100％。现在我想将其宽度设置为相同的值（包括屏幕大小调整）。

HTML：

<main>
  <div id="mainCircle">
  </div>
</main>

的CSS：

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

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

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

JS：

$(document).ready(function() {
  $('#mainCircle').width($('#mainCircle').height);
  $(window).resize(function() {
    $('#mainCircle').width($('#mainCircle').height);
  })
})

如果我将$('#mainCircle').width的值作为数字传递 - 例如100px，这将起作用，但不是动态的。我做错了什么？

Answer 1

jQuery中的

height()是一个函数，而不是属性

$(document).ready(function() {

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

});

jQuery - 设置div宽度等于height

1 个答案: