孩子的身高与父母的宽度有关

Question

我有这样的网格，并且我的侧边栏占12 col的4，接近33.3％，并且我的侧边栏是父元素

$susy: (
        columns   : 12,
        gutters    : 1/1.618033989/1.618033989/1.618033989,
        math         : fluid,
        output        : float,
        gutter-position        : inside,
);
@include border-box-sizing;

.sidebar {
  height: 100vh;
 @include span(4);
}

我在侧边栏中有div标签，孩子的宽度是父级的100％，现在我希望孩子的高度是父级的宽度*数字

我已经尝试过这样的事情

 width: 33.3333vw;
 height:20.601112354vw;

但是当我们没有网格并且没有父元素并且我已经尝试过时

#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%; /* 4:3 aspect ratio */
}

#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver /* show me! */
}

但是此方法中有很多错误，例如您在孩子中放置了2个或多个div标签，并且使用此方法应该有很多技巧

我想要一些简单地获取父元素的宽度并将其乘以并使子元素高度的方法。因此，当我们调整浏览器的大小时，父元素的宽度得到改变->子元素的高度得到改变

Answer 1

var width = $('.child').width();
    var parentWidth = $('.sidebar').width();
    var ratio = parentWidth/1.618033989;
    $(".child").height(ratio);



$( window ).resize(function() {
    var width = $('.child').width();
    var parentWidth = $('.sidebar').width();
    var ratio = parentWidth/1.618033989;
    $(".child").height(ratio);