CSS Emular posição: pegajoso - javascript, html, css

Minha estrutura de documentos:

<div id="section">
<div class="subSection">
<h2></h2>
</div>
<div class="subSection">
<div></div>
</div>
<div id="controlBox">
<h2></h2>
<form></form>
</div>
</div>

Eu preciso emular a posição lendária: pegajoso (que eu não posso começar a trabalhar, ou realmente encontrar muita documentação sobre) na #controlBox. Qualquer maneira de fazer isso com JS ou CSS?

Respostas:

Eu não sei sobre uma solução puramente CSS, mas jQuery pode ser capaz de resolver este problema.

Pseudo-código:

// Calculate height of screen
// Choose what percentage of that both subSections take up
// Remaining percentage is the height of the controlBox

Então, pode parecer um pouco assim em jQuery:

// this returns the value of the browser"s window"s height in pixels
$height = $(window).height();

// this is considering that both subsections are next to each other (they take up 80% of the height)
$subsectionHeight = $height * 0.8;

Ou, se as subseções estiverem em cima umas das outras e elas ocuparem 80% da altura no total:

$subsectionHeight = $height * 0.4;

// controlBox takes up 20% of height of window
$controlboxHeight = $height * 0.2;

// then you can assign the heights to each element
$(".subSection").css("height", "$subsectionHeight");
$("#controlBox").css("height", "$controlboxHeight");

Eu entendo que você prefere CSS puro, mas acho que o jQuery é de grande utilidade às vezes.

Se você não conhece o jQuery ou está tendo problemas para entender o jQuery, recomendo que você se inscreva para Curso de jQuery da Codecademy.