股利。合并百分比和固定大小

Question

有可能吗？ div“menu”和“submenu”需要高50px。 “顶部”和“底部”需要为60％和40％。对于“顶部”，behinde-the-scene计算将是60％ - 50px。

<div id="menu"></div>
<div id="top">
</div>
<div id="submenu"></div>    
<div id="bottom">
</div>

Answer 1

当你问你是否可以这样做？因为是的，你可以

#menu, #submenu{
    height: 50px;
}
#top{
    height: 60%;
}
#bottom{
    height: 40%;
}

两个菜单都是50px会发生什么，然后顶部和底部占据页面的60％和40％。很可能你会有滚动条，因为页面将超过100％的页面100px，但它很可能。

您可以混合百分比，像素和ems。

Answer 2

CSS不会混合单位让你说60％ - 50px - 来实现这样的效果，你不得不求助于JavaScript来计算尺寸。

如果您的div直接位于内部，则不必重新实现过多的布局引擎 - 在文档加载时，获取视口大小，然后计算60％ - 50px的像素数并将其指定为#top元素的高度，对于#bottom也是如此。