LiquidレイアウトでLess.jsを使用してdivの高さを計算する

Question

私は流動的なレイアウトを持っていて、私のCSSにはLess.jsを学んでいます。

私は、ユーザーのビューボックスを考慮する必要があるdiv 'A'を持っています。別のdiv 'B'の高さ（％）と最後に別のdiv 'C'をピクセルに入れます。

@menubarsHeight: 7%; // declaring variable with div 'B' 's height. 
@ttlHeight: '$(window).height()';  // calculating height using jquery 
@midParentHeight: -20px + @didParentHeight - @menubarsHeight;  // calculating the height based on the above two variables, -20px is the height of div 'C'.  

Answer 1

不明のいくつかはここにあります。ここでは

は、私が仕事だろうと思ったではなく、何をするかです。つまり、@didParentHeightが何であるかを教えてくれるわけではなく、@ttlHeightと計算しますが、使用しないでください。また、div Bの親が何であるかを明示的に述べていません（窓？）。

これらの不確実性を考慮して、いくつかのことを仮定して回答を試みます。私はかなりじゃないので、私は0.07の代わり7%を使用

@menubarsHeight: 0.07; /* define as decimal */ 
@midParentHeight: @ttlHeight - 20px - (@ttlHeight * @menubarsHeight); 

：すべての3つのdivのは、親としてのウィンドウを持っている、とあなたのjavascriptが正しいウィンドウの高さを与えている場合、これが答えになりますように、それはそうですLESSがパーセンテージを使って正しく乗算を行うかどうかを確かめてください（それは、pxと%単位を混合するでしょう）。

なるはず

@midParentHeight: 100px - 20px - (100px * 0.07); 

：

@midParentHeight: 100px - 20px - 7px = 73px 

後で実際にあなたのdiv Bを定義するために@menubarsHeightを使用する必要がある場合、そのように小数で、その後、@ttlHeightは100pxたと仮定すると、これはに計算する必要があります行うこの（小数点以下を取り、CSSの%単位の値に入れます）：Wで

div.B { height: percentage(@menubarsHeight); } 

Answer 2

あなたはビューポートの高さを計算しようとしています。

次の簡単なCSSが問題を解決しました。しかし、Scott氏の答えは、少ないクエリでは最高です。

position: absolute; 
    top: 8%; 
    bottom: 50px; 
    left: 1.5%; 
    right: 1.5%;