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

我有一个液体布局，并正在学习/使用Less.js为我的CSS。使用液体布局中的Less.js计算div的高度

我有一个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'.

来源

2012-05-13 Kayote

有不清楚的几件事情在这里。也就是说，你不告诉我们什么是@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到后来竟定义格B，然后做到这一点（这将采取十进制，并把它转化为一个CSS单位%值）：

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

来源

2012-05-13 18:49:42 ScottS

谢谢ScottS。我正在玩变数，并错误地插入旧的参考。到另一个变量。你的回答是正确的，除了现在我在加载页面时出现'C操作不是函数'错误。我怀疑它与less.js中的jQuery有关。有没有任何参考。关于如何链接jquery的更少？ – Kayote

上午：明天我会检查这个答案是否正确。我希望能够解决jquery问题，因此这个问题一直持续到明天。最佳， – Kayote

@ Kayote - 也许[这个网站]（http://siderite.blogspot.com/2010/03/css-less-jquery-plugin.html）将有助于您的jQuery。我对LESS并没有太多经验，也没有将它与jquery整合的经验。 – ScottS

对w-唉，事实证明，你不需要更少/ js来做我想要做的事情，即计算视口的高度。

以下简单的CSS解决了这个问题。然而，ScottS的答案对Less查询来说非常棒。

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

来源

2012-05-15 07:53:09 Kayote

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

回答

相关问题