1

私は流動的なレイアウトを持っており、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'.
4

2 に答える 2

2

ここで不明な点がいくつかあります。つまり、何が何であるかを教えず@didParentHeight、計算はします@ttlHeightが使用しません。また、div B の親が何であるか (ウィンドウ?) を明示的に述べていません。

これらの不確実性を考慮して、いくつかのことを想定して回答を試みます。3 つの div すべてがウィンドウを親として持ち、javascript が正しいウィンドウの高さを指定している場合、次のように答えられます。

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

LESSがパーセンテージを使用して正しく乗算を行うかどうかがよくわからないため、0.07代わりに使用します（混合と単位になります）。したがって、小数を使用すると、 was と仮定すると、次のように計算されます。7%px%@ttlHeight100px

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

次のようになります。

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

後で div B を実際に定義するために を使用する必要がある場合は、次のようにします (これにより、小数点が取り、 CSS の単位値に@menubarsHeight入れられます)。%

div.B { height: percentage(@menubarsHeight); }
于 2012-05-13T18:49:42.773 に答える
0

ちなみに、私がやろうとしていたこと、つまりビューポートの高さを計算するために、less/js は必要ありません。

次の単純な CSS で問題が解決しました。ただし、ScottS の回答は、Less クエリに対しては素晴らしいものです。

    position: absolute;
    top: 8%;
    bottom: 50px;
    left: 1.5%;
    right: 1.5%;
于 2012-05-15T07:53:09.367 に答える