Question

我有这样的网格，我的侧边栏将12个中的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! */
}

但是这个方法中有很多错误就像你在孩子身上放了两个或更多div标签一样，使用它应该充满了技巧

我想要一些简单地得到父的宽度并且乘以那个并且使子元素的高度变成的方法。当我们调整父级的宽度变化时调整浏览器的大小 - ＆gt;孩子的身高得到改变

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);

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

1 个答案: