Utiliser la méthode Golden Mean pour dimensionner la hauteur de l'élément

Question

En appliquant the Golden Mean à la hauteur de mon élément, afin que la page soit divisée harmoniquement. Je l'ai fait dans jQuery:

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

Cette tailles la hauteur de #split-div de sorte que l'écran semble être divisée en deux zones par proportionnés le nombre d'or (ici simplifié à 1,618). Cependant, cela dans un script n'est pas très efficace.

Est-il possible de définir cela directement en CSS, en utilisant peut-être calc()?

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

bien sûr mon problème avec ce qui précède est que je dois la hauteur de la fenêtre pour obtenir mon calcul a commencé ...

Answer 1

Oui, il est très possible en utilisant calc():

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

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

Il suffit d'utiliser vh (V iewport H huit) pour obtenir la hauteur de la page.

1VH = 1/100ème de la hauteur de la fenêtre.

Note: comme mentionné par @Rory McCrossan dans the comments, calc() est pas pris en charge dans IE8 ou au-dessous. See support tables.