html - 在纯 CSS、Stylus 或 Nib 中获取另一个元素的高度

Question

我想用CSS实现一个导航栏

HTML

<nav>
    Navbar content
</nav>
<div id="mainContent">
    Main page
</div>

CSS

nav {
    position:fixed;
    height: X%;
    min-height: Ypx;
}

#mainContent {
    margin-top: Z; // where Z is the height of nav which is either X% or Ypx
}

我知道一个解决方案是使用 jQuery 但现在我正在学习纯 CSS 并计划继续使用 Stylus 和 meteor 中的 Nib.... SO... 是否有类似 CSS 的解决方案？

即使需要 Stylus，您能否在“样式表”中进行一些计算以获得其他元素的高度？

Answer 1

首先，计算屏幕的高度(以像素为单位)，min-height : Ypx; 有效。

如果屏幕高度 H<((Y*100)/X)px 则 min-height 将是导航栏的高度。

所以，制定规则，

#mainContent { 上边距:X%;}

还有

`@media screen and (max-height:Hpx) {
#mainContent {
                 margin-top: Ypx;
             }
}

其中 Hpx 等于先前计算的值 ((Y*100)/X)px。

因此，通常 margin-top 将是 X% ，但如果屏幕高度低于 Hpx 触发 min-height ，@media 规则将被触发，使 margin-top 等于 Ypx。