1

我有一个流畅的布局，并且正在学习/使用 Less.js 作为我的 CSS。

我有一个 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 的父级是什么（窗口？）。

鉴于这些不确定性，我将假设一些事情并尝试回答。如果所有三个 div 都将窗口作为其父窗口，并且您的 javascript 给出了正确的窗口高度，那么看起来这就是答案：

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

我使用0.07而不是7%因为我不太确定 LESS 是否会使用百分比正确进行乘法（它将是混合px和%单位）。所以用小数，然后假设@ttlHeight是100px，这应该计算为：

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

应该变成：

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

如果您需要@menubarsHeight稍后实际定义您的 div B，请执行此操作（这将采用小数并将其放入%css 的单位值）：

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 回答