Использовать золотую середину для высоты элемента размера

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 (V iewport H восемь) единиц, чтобы получить высоту страницы.

1vh = 1/100- высоты окна просмотра.

Примечание: как было упомянуто @Rory McCrossan в the comments, calc() не поддерживается в IE8 или ниже. See support tables.