Jquery 在液体布局中使用Less.js计算div的高度

我有一个流动的布局，正在学习/使用更少的.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'.     

---

这里有一些不清楚的地方。也就是说，您不告诉我们什么是

@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的

%

单位值）：

---

顺便说一句，事实证明，您不需要更少的/js来完成我想做的事情，即计算视口的高度

下面简单的CSS解决了这个问题。然而，斯科茨的答案是令人敬畏的少质疑

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

---

谢谢你，斯科特。我在玩弄这些变量，并错误地将旧的引用插入到另一个变量中。您的答案是正确的，但现在我在加载页面时遇到“C操作不是函数”错误。我怀疑这与less.js中的jquery有关。关于如何在更少的时间内链接jquery，有什么参考资料吗？附言：我明天会检查这个作为正确答案。我希望jquery问题得到解决，因此将此问题保留到明天。最好，@Kayote--也许会对您的jquery有所帮助。我对LESS没有太多经验，也没有将它与jquery集成的经验。感谢ScottS，它似乎是一个单独的插件，用于将jquery功能集成到LESS中。。。我正在调查这件事。

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