Question

我将the Golden Mean应用到我的元素的高度，以便页面被谐波分割。我在jQuery中完成了这个：

    var $win = $(window);
    var $height = parseInt($win.height());
    var $golden = ($height - ($height / 1.618));
    $("#split-div").height($golden + "px");

这会调整#split-div的高度，使屏幕看起来分为两个区域，按照中庸（这里简化为1.618）进行划分。

但是，在脚本中执行此操作效率不高。是否可以直接在CSS中设置它，可能使用calc()？

#split-div {height: calc(....something....);}

我的上述问题是我需要视口的高度才能开始计算。

Answer 1

是的，使用calc()非常有可能：

＆＃13;

.golden-mean {
  height: calc(100vh - (100vh / 1.618));
  background: red;
}

＆＃13;

<div class="golden-mean"></div>

＆＃13;

只需使用vh（ V iewport H 8）单位即可获得页面高度。

1vh = 1/100 视口的高度。

注意：正如@Rory McCrossan中the comments所述，IE8或更低版本不支持calc()。 See support tables.

使用黄金平均值来确定元素高度

1 个答案: