css - 分区结合百分比和固定大小

Question

这可能吗？ div“菜单”和“子菜单”需要 50px 高。 “顶部”和“底部”需要分别为 60% 和 40%。对于“顶部”，幕后计算将为 60% - 50 像素。

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

Answer 1

CSS 不会混合单位让你说 60% - 50px -- 要实现这样的效果，你必须求助于 JavaScript 来计算大小。

如果您的 div 直接在里面，您将不必重新实现太多的布局引擎——在文档加载时，获取视口(viewport)大小，然后计算 60% - 50px 以像素为单位并将其指定为#top 元素高度，#bottom 也类似。