获得纯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 和流星中的笔尖 .... SO ...是否有CSS-esque解决方案？

你能在＆＃34;样式表＆＃34;中做一些计算吗？即使它需要Stylus，也要获得其他元素的高度？

Answer 1

首先，计算屏幕的高度，以min-height : Ypx;工作的像素为单位。

如果屏幕高度H＆lt;（（Y * 100）/ X）px，那么min-height将是导航栏的高度。

所以，设置规则，

#mainContent { margin-top: X%;}

以及

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

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

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