Div。合并百分比和固定尺寸

Question

可能吗？ div“菜单”和“子菜单”需要为50px高。 “顶部”和“底部”需要达到60％和40％。对于“top”，behinde-the-scene-calculation将为60％ - 50px。

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

Answer 1

CSS不会混合单位让你说60％ - 50px - 要达到这种效果，你必须求助于JavaScript来计算大小。

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

Answer 2

当你问你是否可以做到这一点？因为是的，你可以

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

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

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