使用黄金分割法调整元素高度

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()：

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

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

只需使用vh (Viewport H八) 个单位来获取页面高度。

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

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